优化Webpack打包速度

1. Webpack 可以配置 externals 来将依赖的库指向全局变量，从而不再打包这个库，比如对于这样一个文件：

 

import React from 'react';

console.log(React);

如果你在 Webpack.config.js 中配置了externals：

 

module.exports = {

externals: {

'react': 'window.React'

}

//其它配置忽略......

};

等于让 W ebpack 知道，对于 react 这个模块就不要打包啦，直接指向 window.React 就好。不过别忘了加载 react.min.js，让全局中有 React 这个变量。

 

2. webpack.DllPlugin

 

使用一份dll的配置文件

## webpacl.dll.config.js

module.exports = {

entry: {

vendor: [

'vue', 'vuex', 'vue-router', 'vuex-router-sync', 'babel-polyfill', '...'

]

},

output: {

path: path.join(__dirname, './public/', 'dist'),

filename: '[name].dll.js',

library: '[name]_library'

},

plugins: [

new webpack.DllPlugin({

path: path.join(__dirname, './public/', 'dist', '[name]-manifest.json'),

name: '[name]_library'

})

]

}

生成 dll 文件之后, 可以根据环境变量在页面的静态文件中引入

 

3. 多进程构建

Webpack的构建过程是单进程的, 利用 HappyPack 可让 loader 对文件进行多进程处理

 

4. 提取公共的依赖模块

使用CommonsChunkPlugin提取一些不会经常更新的公用的模块

 

5. 文件分离

将css与js分离开，多页的话将js分离开

 

6. 按需加载