webpack打包vue项目性能优化
-
项目打包上线设置productionSourceMap为false减小.map文件所占dist文件的体积;
-
开启gzip对dist文件进一步压缩(ps:需后端配合开启gzip方可使用);
-
使用cdn减小打包后vendor.js的体积,从而缩短首屏加载时间(ps:第3步如果注释掉出现错误可以不进行注释);
-
按需引用组件(iview为例);
-
webpack-parallel-uglify-plugin替换uglifyjs-webpack-plugin提升打包速度(ps:uglifyjs-webpack-plugin单进程,webpack-parallel-uglify-plugin多进程)
// 引入 ParallelUglifyPlugin 插件 const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin'); // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码 new ParallelUglifyPlugin({ // 传递给 UglifyJS 的参数 uglifyJS: { output: { // 最紧凑的输出 beautify: false, // 删除所有的注释 comments: false, }, compress: { // 在UglifyJs删除没有用到的代码时不输出警告 warnings: false, // 删除所有的 `console` 语句,可以兼容ie浏览器 drop_console: true, // 内嵌定义了但是只用到一次的变量 collapse_vars: true, // 提取出出现多次但是没有定义成变量去引用的静态值 reduce_vars: true, } }, test: /.js$/g, //使用正则去匹配哪些文件需要被 ParallelUglifyPlugin 压缩,默认是 /.js$/g include: [], //使用正则去命中需要被 ParallelUglifyPlugin 压缩的文件,默认为 [] exclude: [], //使用正则去命中不需要被 ParallelUglifyPlugin 压缩的文件,默认为 [] cacheDir: '', //缓存压缩后的结果,默认不会缓存,想开启缓存请设置一个目录路径 workerCount: '', //开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1 sourceMap: false //是否输出 Source Map,这会导致压缩过程变慢 })