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. 按需加载