webpack打包太慢了，怎么优化

使用最新的webpack

现在最新的webpack的版本是4.39.2，据说打包速度提升了不少

image.png

DllPlugin插件和和DllReferencePlugin单独编译一些不经常改变的代码

使用happypack多线程进行构建

使用webpack-parallel-uglify-plugin多线程压缩

externals选项

• 先用webpack-bundle-anlyzer对项目进行模块分析生成report，查看哪些模块体积过大
  先设externals选项，把一些能直接走cdn的库拿出去如"element-ui"、“v-charts"

    'element-ui': 'Element',
    'v-charts': 'VCharts'
}

处理 loader 时，配置 include，缩小 loader 检查范围

使用 alias 可以更快地找到对应文件

使用UglifyJsPlugin去掉console和debugger信息

image.png

new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_debugger: true,//debugger默认就是true
            drop_console: true,//清除console语句，默认是false
            }
        },
        })