@jswork/webpack-dll-cli 优化webpack打包速度
项目中 webpack 打包速度在 sass-loader, babel-loader 这两处有很大的消耗，这个工具，重点复用 dll 方式优化这2处
项目主页: https://github.com/afeiship/webpack-dll-cli
插件原理
- 项目中通用的 sass 一次性打包，不用每次编译，有添加新的公用 sass 包的时候再调用这个命令进行编译
- 项目中常用的 js 包，react/react-dom/antd 等大型组件包，使用 dll 试引入，有变化的时候，再进行编译
- 总结：不常变化的，大型的包，以命令 + yaml 方式进行一次性生成，从而每次编译的时候只会打包变化的，速度自然提升
安装
npm i -D webpack webpack-cli
npm i -g @jswork/webpack-dll-cli
插件使用
# 生成配置文件
wpkdc -i
# 生成css
wpkdc -t=css
# 生成js
wpkdc -t=js
wpkdc命令帮助
Generate dll files use webpack.DllPlugin.
USAGE
$ wpkdc
OPTIONS
-h, --help show CLI help
-i, --init Generate .webpack.dll.yml file.
-t, --type=(css|js) [default: js] Type of asset(css/js).
-v, --version show CLI version
项目中的配置文件如下
name: webpack-dll-config
js:
path: src/assets/libs/js
entry:
vendors:
- react
- react-dom
- antd
- antd-form-builder
- styled-components
- lodash
css:
path: src/assets/libs/css
entry: ./src/assets/styles/index.scss
参考