性能优化

[a7650]

1. 路由懒加载

router导入模块的时候使用 ()=>import(' ... ')

2. 使用gzip压缩

需要先安装插件compression-webpack-plugin，之后在plugins里面加入 如下配置

new CompressionPlugin({ test: /\.js$|\.html$|\.css/, threshold: 10240 // deleteOriginAssets:false })

同时还要服务器进行配置，nginx里面开启 gzip on 同时可以在请求头/响应头查看Accept-Encoding/content-encoding.

3.CDN引入

对于某些体积比较大的包，通过cdn引入可以有效减少文件体积， https://cdn.bootcss.com 上找到对应的cdn地址，然后在index.html里引入，在配置里面configureWebpack加入新的选项，

externals: { "echarts": "echarts", "crypto": "CryptoJS" }

在使用的时候无需import，直接使用即可。

4.运行时构建和独立构建

参考 https://www.jianshu.com/p/bce0e4376dd9

5.打包分析

安装插件 cnpm install webpack-bundle-analyzer -D，然后package.json里面添加命令 "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"

然后配置里面加入新插件 new BundleAnalyzerPlugin({ analyzerMode: "server", analyzerHost: "127.0.0.1", analyzerPort: 8888, reportFilename: "report.html", defaultSizes: "parsed", openAnalyzer: false, generateStatsFile: false, statsFilename: "stats.json", statsOptions: null, logLevel: "info" }) 运行npm run analyz,或者直接build 访问8888即可查看分析图。

6.其他教程

http://jeffjade.com/2017/08/06/124-webpack-packge-optimization-for-volume/ https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c0678636fb9a049b347c0aa