webpack优化

项目背景：系统区分不同用户角色，针对不同角色生成不同的js文件（不同的js包含不同的路由设置）。

【优化结果】

• 打包时间：613330ms -> 311976ms
• 文件大小：6.72M -> 2.13M

【优化思路】

1. 缩减打包范围和搜索路径：由于之前已经对babel-loader指定了include，所以本次只设置了modules以减少搜索步骤
2. 通过设置watchOptions.ignored减少开发时的监听目录以节省时间和内存
3. 使用happypack多进程转换代码
4. 使用UglifyjsWebpackPlugin1.0版本多进程压缩代码
5. 将react，react-dom，antd，superagent等基础库提取到dll，方便做持久缓存
6. 入口文件引用dll，每次打包只打包业务代码

继续优化需要调整业务代码，提出以下几点建议：

1. 减少需要打包的js个数：将角色再分类或归总到一个js中，前后端共同判断用户角色。
2. 将静态资源放到CDN上

webpack详细配置参见github

优化前

0. 优化前.jpg

1. 指明第三方模块存放的位置

resolve: {
    // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤：只在该目录下寻找，不再去上级目录寻找
    modules: [path.resolve(__dirname, '../node_modules')]
  }

效果：

1. 指明modules路径.jpg

2. 减少开发时的监听目录

watchOptions: {
    // 开发时不监听node_modules目录下的文件
    ignored: /node_modules
},

3. 将react，react-dom，antd等基础库提取到dll

生成dll所需时间及dll文件的大小：

2-1. 构建dll所需时间.jpg

4. 将基础库放入dll后入口文件的打包时间和大小

2-2. 使用dll后入口文件构建时间.jpg

5. 使用happypack将loader的转换工作分解到多进程

3. 引入happypack.jpg

6. 使用UglifyjsWebpackPlugin1.0版本进行多进程压缩

4. 使用UglifyjsWebpackPlugin进行多进程压缩.jpg

7. 按需加载&异步路由

5. 按需加载&异步路由.jpg