vue项目webpack打包

 

之前一篇随笔写到vue多环境打包环境配置：https://www.cnblogs.com/shun1015/p/13411636.html

1.区分vue脚手架版本，版本不同，项目结构不同，多环境变量配置方式不同

• package.json文件里 scripts对象上配置打包命令

2.打包后的代码如何运行

• 不能直接双击index.html文件直接运行
• 放到http容器里运行 serve，相当于在本地起一个服务，让打包后的代码运行在服务上

npm i -g serve  

• 全局安装好后，打包项目为dist文件夹，然后在package.json的 script 中添加一行npm脚本：

"serve": "serve ./build"

npm run serve

• 会在命令行下出现这句：INFO: Accepting connections at http://localhost:5000
• 在浏览器输入http://localhost:5000即可查看到你打包好的项目(和发布到服务器上是一样的)

注意：仅限hash路由模式，history模式的会请求到后端，需要后端配置，否则页面404

3.打包制定不同的环境变量

• 关于vue_cli3版本以上，之前有一篇博客详细写过
• npm run build，npm run build:dev，npm run build:test，
• 当process.env.NODE_ENV === 'production'时，会对代码进行压缩，为deveopment时不会

• 4.打包手动配置文件

• vue_cli基于webpack
• vue-cli零配置，脚手架3以上
• 子域名处理：项目根目录新建publicPath: 配置子域名路径，之前我是在router里面

5.大文件打包处理

1. 开发环境打包：npm run build:dev dist文件不会被压缩

2. 生产环境打包：npm run build:prod dist文件会被压缩（压缩，注释，空格），每个js文件会对应的.map文件，.map文件作为映射，方便浏览器调试

   配置productionSourceMap属性，可根据环境变量判断

   productionSourceMap: false

3. dist文件大，排除第三方包，使用cdn资源，配置webpack

//配置webpack,排除第三方包
  configureWebpack: config => {
    Object.assign(config, {
      externals: {
        element: 'element-ui'
      },
      // externals: {
      //     /**
      //     *key: main.js中全局引入的路径
      //     *value: 全局暴露出来的对象名
      //     */
      //   "cesium/Cesium": "Cesium" //忽略js
      //   "cesium/Widgets/widgets.css": "Widgets" //忽略css
      // }
      })
    }

6.gzip进一步压缩

npm i compression-webpack-plugin

• 借助CompressionWebpackPlugin插件来提前对文件进行Gzip压缩

• 这样服务器查找到有与源文件同名的.gz文件就会直接读取，不会主动压缩，降低cpu负载，优化了服务器性能

let CompressionWebpackPlugin = require("compression-webpack-plugin")
​
configureWebpack: config => {
    let plugins = [
      new CompressionWebpackPlugin({
        // filename: '[path].gz[query]',  //注意这里有坑，（asset 改为 filename）
        algorithm: 'gzip', //压缩方式
        test: /.js$|.css$/,  //需要压缩的文件
        threshold: 10240,  //大于10k的 进行压缩
        // minRatio: 0.8     //压缩比
      })
    ]
    if(process.env.NODE_ENV === 'production') {
      config.plugins = [...config.plugins, ...plugins]
    } else {}
  }

• 上述步骤配置完成后，再次执行 npm run build，有出现报错

TypeError:Cannot read property 'thisCompilation' of undefined

• 查资料看，可能和插件的版本有关； 直接npm install后的版本：compression-webpack-plugin": “^7.1.2” 安装时，控制台有警告提示：compression-webpack-plugin 和 webpack 的版本不匹配

• 试着 降低compression-webpack-plugin版本到1.1.12，打包成功

npm uninstall compression-webpack-plugin
npm install compression-webpack-plugin@1.1.12

• 资源发布到服务器或者本地使用serve服务，访问时，通过抓包可看到 请求 和 响应 里都带有gzip标记，性能最大化

7.将项目打包为安卓app

https://www.cnblogs.com/shun1015/p/14722365.html

8，路由的两种模式（hash，history）

https://www.cnblogs.com/shun1015/p/12758779.html