webpack 性能提速

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

2.启用happypack多核构建项目

3.修改source-map配置

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

一、按需引用
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)

二、启用happypack多核构建项目
安装happypack后，修改/build/webpack.base.conf.js文件便可

npm install happypack --save-dev

// /build/webpack.base.conf.js
const 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正确的打开方式。