1. 按需引用 外部的组件按需引用

2.启用happypack多核构建项目

3.修改source-map配置

1. 启用DllPlugin和DllReferencePlugin预编译库文件

1、按需引用

1.1几乎所有的第三方组件框架都会提供组件的按需引用方式，以iview为例，通过借助插件babel-plugin-import可以实现按需加载组件，减少文件体积，只需要修改.babelrc文件

npm install babel-plugin-import --save-dev// .babelrc{  "plugins": [["import", {    "libraryName": "iview",    "libraryDirectory": "src/components"  }]]}

1.2然后这样按需引入组件，就可以减小体积了import { Button } from 'iview'Vue.component('Table', Table)

2、启用happypack多核构建项目

安装happypack后，修改/build/webpack.base.conf.js文件即可

npm install happypack --save-dev// /build/webpack.base.conf.jsconst HappyPack = require('happypack')const os = require('os')const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })// 增加HappyPack插件plugins: [    new HappyPack({      id: 'happy-babel-js',      loaders: ['babel-loader?cacheDirectory=true'],      threadPool: happyThreadPool,    })  ]// 修改引入loader{    test: /\.js$/,    // loader: 'babel-loader',    loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader    include: [resolve('src'), resolve('test')]}

实现js缓存

webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分，具体的用法就不做过多介绍，不太了解可以参考webpack官网介绍；

该插件是webpack项目常用的一个优化功能，几乎在每个webpack项目中都会用到。使用该插件带来的好处：

提升webpack打包速度和项目体积：将webpack入口的chunk文件中所有公共的代码提取出来，减少代码体积；同时提升webpack打包速度。

利用缓存机制：依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。

但是在项目中，若插件打开方式不正确的话，上面的第二点其实是无法实现，因为这种情况下：

没有被修改过的公有代码或库代码打包出的Entry Chunk，会随着其他业务代码的变化而变化，导致页面上的长缓存机制失效。

那么，下面就来开启CommonsChunkPlugin正确的打开方式。