vue-cli webpack2项目打包优化分享

vue-cli webpack2项目打包优化分享项目打包优化分享

下面小编就为大家分享一篇vue-cli webpack2项目打包优化，具有很好的参考价值，希望对大家有所帮助。一起

跟随小编过来看看吧

减小文件搜索范围减小文件搜索范围

配置配置 resolve.modules

Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import 'vue' 这样不是相对、也不是

绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录

里只有一个node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；同样，对于别

extensions: ['.js', '.vue', '.json'],

modules: [

resolve('src'),

resolve('node_modules')

],

alias: {

'vue$': 'vue/dist/vue.common.js',

'src': resolve('src'),

'assets': resolve('src/assets'),

'components': resolve('src/components'),

合理设置合理设置 test & include & exclude

test：必须满足的条件（正则表达式，不要加引号，匹配要处理的文件）

exclude：不能满足的条件（排除不处理的目录）

include：导入的文件将由加载程序转换的路径或文件数组（把要处理的目录包括进来）

这可以减少不必要的遍历，从而减少性能损失。

替换代码压缩工具替换代码压缩工具

Webpack 默认提供的 UglifyJS 插件，由于采用单线程压缩，速度慢 ；

webpack-parallel-uglify-plugin 插件可以并行运行 UglifyJS 插件，更加充分而合理的使用 CPU 资源，这可以大大减少的构建

时间；

当然，该插件应用于生产环境而非开发环境，安装插件后，进行如下配置：

// sourceMap: true

// }),

// 增加 webpack-parallel-uglify-plugin来替换

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

new ParallelUglifyPlugin({

cacheDir: '.cache/', // 设置缓存路径，不改动的调用缓存，第二次及后面build时提速

uglifyJS:{

output: {

comments: false

},