Vue项目—Webpack的优化以及小技巧

前言

随着项目的体积越来越大，打包的时间也越来越长，体积也越来越大。所以必不可少的优化工作。这分为了打包时优化，和打包体积优化，以及开发可能要用到的常用插件，这里测试用的的版本是vue-cli 2.9.6 版本项目。

打包时优化

节省打包所花的时间，这里有分为了缓存，多进程实例打包，dll分包。

1.多进程实例：使用 (HappyPack/thread-loader) 解析资源

原理：每次webpack解析一个模块，HappyPack会将它及它的依赖分配给worker线程中
项目中配置
对比
启动之后，可能这并没有很大的体现，因为静态资源比较多，组件少

2.分包：预编译资源模块使用（DLLPlugin 和 DllReferencePlugin）

DLLPlugin:进行将一些基础包如vue，vue-router，vuex,等打包或者一些业务包，这样webpack在打包时就不会进行对它进行分析DllReferencePlugin：将DLLPlugin打包后的文件加载到项目中在build 文件下新增一个配置文件 webpack.dll.conf.js，配置如下

const path = require('path')
const webpack = require('webpack')
module.exports = {
  context:process.cwd(),
  resolve: {
    extensions:['.js','.jsx','.json','.less','.css'],
    modules:[__dirname,'node_modules']
  },
  entry: {
    library: [
      'vue',
      'vue-router',
      'vuex'
    ]
  },
  output:{
    filename:'manifest.dll.js',
    path:path.resolve(__dirname, './libs/library'),
    library:'[name]'
  },
  plugins:[
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, './libs/library/manifest.json')
    })
  ]
}