前端打包性能优化

如何查看打包后的文件

正常往往的npm run build 就可以，但是一般项目中会使用eleemnt-ui呀或是echarts等等，打出的包会非常大，因此需要优化。
Step1:
package.json文件中添加script:
需要先安装：npm install --save-dev webpack-bundle-analyzer 然后配置插件；

"pack": "npm_config_report=true node --max_old_space_size=409600 build/build.js"

Step2: npm run pack

然后就可以看见打包完的vendor.js 和 app.js 大小；

优化方案

1、使用GZip格式打包资源文件；
2、拆分vendor.js & app.js，首屏只只加载当前需要使用的资源；
3、将各个项目中共用的npm依赖包打包成单独的docker，各项目通过类似CDN的方式引用同一地址，充分利用缓存；
4、公用组件中图标文件使用iconfont代替svg；

使用GZIP压缩资源文件

将打包后的文件设置为gzip压缩文件格式，浏览器下载gzip文件后解析成js运行

安装压缩插件

npm install --save-dev [email protected]
Tips: 最新版compression插件与webpack 3.x不兼容，1.1.11版本可以

修改webpack配置文件config/index

productionGzip: true  => 开启GZip打包模式
productionSourceMap: false => 取消生成的map文件，map文件仅用于debug，production环境不需要

nginx中开启优先 加载Gzip文件

gzip on;
gzip_static on;

统一打包公用的npm 依赖包

将各项目公用第三方包（如：vue，axios，element-ui等）统一打包，各项目访问同一地址，充分利用缓存；
将这些统一部署在一个服务器上，然后在项目中 index.html 通过script 标签 以外链的方式引入

然后 配置相应的nginx 转发；

第三步是修改webpack，将app.js按照路由拆分，点击菜单后再加载所需资源，减少首屏加载时间。

build/prod.config

new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),