webpack打包优化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_36422236/article/details/84987946

1.减小文件搜索范围

配置resolve.modules

Webpack的resolve.modules配置模块库（即 node_modules）所在的位置，在 js 里出现 import ‘vue’ 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。但是默认的配置，会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径；同样，对于别名(`alias)的配置，亦当如此：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  resolve: {
    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'),
      // ...
      'store': resolve('src/store')
    }
  },
  ...
}

2.loader配置

声明exclude或include字段

• exclude 排除不满足条件的文件夹

• include 需要被loader 处理的文件或文件夹

{
	test: /\.js$/,
	loader: 'babel-loader',
	// exclude: /node_modules/
	include: [resolve('src'), resolve('test'), resolve('static')]
}

3.替换代码压缩工具

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

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

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

// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
//   compress: {
//     warnings: false,
//     drop_console: true
//   },
//   sourceMap: true
// }),

// 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
  cacheDir: '.cache/',   // 设置缓存路径，不改动的调用缓存，第二次及后面build时提速
  uglifyJS:{
    output: {
      comments: false
    },
    compress: {
      warnings: false
    }
  }
})

4.拷贝静态文件

使用copy-webpack-plugin插件：把指定文件夹下的文件复制到指定的目录；其配置如下：

var CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
  ...
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, '../static'),
      to: config.build.assetsSubDirectory,
      ignore: ['.*']
    }
  ])
]

5.关掉productionSourceMap

在config目录下面的index.js文件中，vue-cli脚手架对开发环境和生产环境都做了相关配置，其中在build配置下设置productionSourceMap为false，避免产出.map后缀结尾的js文件，（除非需要线上调试）