作者：余韵之
Tree Shaking
1、什么是Tree Shaking
示意 只引入须要的模块里的代码，没有应用的是不会打包
import { add } from './math.js';
add(1, 2);math.js里有两个办法，如果应用了Tree Shaking 那么只会打包add办法
2、如何配置
webpack.prod.js 生产环境不须要配置这个，即便配置了这个也是无作用的。
optimization: { // 应用tree shaking
usedExports: true
}package.json
"sideEffects": false, // 示意对所有的模块都要应用 tree shaking
"sideEffects":["@babel/polly-fill"，"*.css"] //示意排除@babel/polly-fill ,排除所有的css文件 其余import 模块都应用 tree shaking留神如果是开发环境development tree shaking 会不失效，因为调试的话sourceMap行数会不准，生产环境production就会失效
Production Development
1、如何切换开发环境和生产环境webpack配置
- 创立生产环境文件 ./build/webpack.prod.js
- 创立开发环境文件 ./build/webpack.dev.js
- 创立公共的代码文件 ./build/webpack.common.js
应用插件 webpack-merge 把配置文件合并
2、配置打包命令
package.json
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js", // 启动热更新，抉择dev配置文件
"build": "webpack --config ./build/webpack.prod.js" // 间接打包，走prod配置文件
}Code Splitting
咱们为什么要做代码宰割呢？举个例子。
假如咱们引入了一个lodash第三方库，它的大小是1MB，咱们的业务代码也有1MB。此时不做任何解决最初打包生成一个main.js大小为2MB。用户关上浏览器须要申请一个2MB的main.js文件。
import _ from "lodash"; // 假如lodash有1MB
// 假如业务代码有1MB
console.log(_.join(['a', 'a', 'c'],"---"))
console.log(_.join(['a', 'b', 'c'],"---"))此时咱们批改业务代码
import _ from "lodash"; // 假如lodash有1MB
// 假如业务代码有1MB
console.log(_.join(['a', 'xxxxx', 'c'],"---"))
console.log(_.join(['a', 'b', 'c'],"---"))从新打包，生成 main.js 2MB。用户须要从新拉取2MB的代码文件。这会使得加载工夫很慢，性能不够好。
所以有什么好的形式来解决这个问题呢？
第一种形式：同步形式
import _ from "lodash" // 假如lodash有1MB
window._ = _// 假如业务代码有1MB
console.log(_.join(['a', 'd', 'c'],"---"))
console.log(_.join(['a', 'b', 'c'],"---"))webpack.config.js
entry: {
lodash: './src/lodash.js',
main: './src/index.js'
}- 首次拜访页面，加载 main.js: 被拆成vendor~lodash.js 1MB 和 业务代码main.js 1MB
- 此时批改了业务代码，用户是不须要从新加载vendor~lodash代码的。只须要从新加载main.js
长处：能够无效提进步代码运行的速度、用户体验进步、性能进步
毛病：须要手动拆分页面的代码，不够智能
第二种形式:同步形式
webpack.config.js
optimization:{
splitChunks:{
chunks:'all'
}
}import _ from "lodash"; // 假如有1MB
console.log(_.join(['a', 'd', 'c'],"---"))
// 此处省略10万行业务逻辑
console.log(_.join(['a', 'b', 'c'],"---"))长处：相比第二种形式，能够主动拆分，打包引入 main.js 和 vendors~main.js
第三种形式：异步形式
装置插件
yarn add -D babel-plugin-dynamic-import-webpack.babelrc
"plugins": ["babel-plugin-dynamic-import-webpack"]异步代码如下
function getComponent(){
return import('lodash').then(({default:_})=>{
let element = document.createElement('span')
element.innerHTML = _.join(['x','y'],'-');
return element;
})
}
getComponent().then(ele=>{
document.body.appendChild(ele)
})留神：异步代码import引入的模块，无需配置额定的webpack.config.js，会主动引入
SplitChunksPlugin 配置参数详情
1、webpackChunkName
批改第三方打包的文件的名字
装置官网的依赖
npm install --save-dev @babel/plugin-syntax-dynamic-import.babelrc
"plugins": ["@babel/plugin-syntax-dynamic-import"]我的项目代码里增加名字 /_ webpackChunkName:”lodash” _/
function getComponent(){
return import(/* webpackChunkName:"lodash" */'lodash').then(({default:_})=>{
let element = document.createElement('span')
element.innerHTML = _.join(['x','y'],'-');
return element;
})
}
getComponent().then(ele=>{
document.body.appendChild(ele)
})留神：生成的代码文件为 ./dist/vendors~lodash.js
如果生成的代码文件不想退出 vendors~ ,而是间接lodash.js
那么配置webpack.config.js
optimization:{
splitChunks:{
chunks:'all',
cacheGroups:{ // 示意打包的文件是否要带vendors,无论同步或者异步
vendors:false,
default:false
}
}
}2、具体的splitChunks的参数性能
optimization: {
splitChunks: {
chunks: 'all', // async 示意只对异步代码宰割，initial 示意只对同步代码宰割，all的话是所有同时会走到cacheGroups.vendors
minSize: 30000, // 示意最小模块大于30000个字节才会做代码宰割
// maxSize: 50000, // 如果拆分的代码大小超过50000,会进行二次拆分，个别配置的比拟少
minChunks: 1,//引入几次才宰割打包，如果只引入1次就宰割，如果是2示意必须大于等于2次才做代码宰割
maxAsyncRequests: 5,// 示意不能超过5个模块宰割，超过前面的模块就不宰割了
maxInitialRequests: 3,// 示意整个网站首页或入口文件 如果做代码宰割不超过3个
automaticNameDelimiter: '~', //组和文件名链接符号 vendors~main.js
name: true,// 示意要更新名字，个别是不须要扭转的
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, // 如果在node_modules里，那么会打包到vendors.js
priority: -10, // 比方jquery 合乎vendors 也合乎default，值越大，阐明优先级更大
filename:'vendors.js' // 示意所有的第三方打包到一个叫vendors.js文件
},
default: { // 如果是引入本人在我的项目里写的模块引入走这里，非node_modules
// minChunks: 2,
priority: -20,// 值越大，阐明优先级更大
reuseExistingChunk: true, // 如果代码曾经打包过，反复援用时就不会再宰割打包，而是复用之前的。
filename: 'common.js'
}
}
}
},这里要留神
- 如果是引入同步代码不会立即宰割，而是会走cacheGroups，依据理论状况来宰割
对 Electron 感兴趣？请关注咱们的开源我的项目 Electron Playground，带你极速上手 Electron。
咱们每周五会精选一些有意思的文章和音讯和大家分享，来掘金关注咱们的 晓前端周刊。
咱们是好将来 · 晓黑板前端技术团队。
咱们会常常与大家分享最新最酷的行业技术常识。
欢送来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注咱们。
发表回复