网站建设免费的服务器,企业网站制作怎么做,企业销售型网站是什么,滨海专业做网站摇树#xff08;tree shaking#xff09;
我主要是想说摇树失败的原因#xff08;tree shaking 失败的原因#xff09;#xff0c;先讲下摇树本身效果
什么是摇树#xff1f;
举个例子
首先 webpack.config.js配置
const webpack require(webpack);/**…摇树tree shaking
我主要是想说摇树失败的原因tree shaking 失败的原因先讲下摇树本身效果
什么是摇树
举个例子
首先 webpack.config.js配置
const webpack require(webpack);/*** type {webpack.Configuration}*/
module.exports {mode: production
};在固定 a.js 用esm导出b.js用commonjs导出不变动
// a.js
export function f1() {console.log(11111);
}
export function f2() {console.log(22222);
}// b.js
exports.f3 function () {console.log(33333);
};
exports.f4 function () {console.log(44444);
};例子1import a.js 和 require b.js
// index.js
import { f1 } from ./a;
import { f3 } from ./b;
console.log(f1);
console.log(f3);打包结果a.j 和 b.js 都摇树了只输出了 f1 和 f3。所以导入用import导出esm和commonjs都可以 例子2import a.js 和 import b.js
// index.js
import { f1 } from ./a;
const { f3 } require(./b);
console.log(f1);
console.log(f3);打包结果a.js 摇b.js 没摇输出了 f1 、f3、f4。所以导入用require不成功 结论
摇树只能import导出用esm和commonjs都可以
因为摇树发生在编译阶段只支持esm的import不支持commonjs的require因为esm是编译时commonjs是运行时
摇树失败的原因
三方面可能导致失败
1、代码没用import引入
2、webpack配置没开启摇树
3、副作用sideEffects
4、babel配置preset-env没写 module:false 参数
代码没用import引入
这一点上面已经说明必须用 import 导入导出用 esm 或者 commonjs 都行
webpack配置没开启摇树
开启摇树两步
1、usedExports设置true标记无用代码esm导出的没使用到的导出函数标记为unused harmony export f2commonjs导出的没使用的导出函数赋值为__webpack_unused_export__
2、terser-webpack-plugin插件做代码压缩去除无用代码根据一步两种标记压缩代码会去除
const webpack require(webpack);/*** type {webpack.Configuration}*/
module.exports {mode: none,optimization:{usedExports:true}
};mode: production模式下默认开启摇树不用做任何配置由源码看出none和development不会开启摇树需要手动加这两步注意要设置minimize:true,或者放到plugins中
看webpack源码默认配置参考 前端进阶面试题详细解答 副作用sideEffects
先来解释下什么是副作用修改当前作用域之外的行为都叫副作用比如在函数内部修改dom修改全局对象等等
这条主要是针对引入三方包三方包package.json的sideEffects字段默认true表示有副作用可以设置为false表示没有副作用设置为数组列出有副作用的文件
在webpack.config.js设置sideEffects:true表示检查三方包的sideEffects字段webpack在用userExports标记无用代码时如果判断不出库中代码是否有副作用就不会标记则压缩的时候也没法清除如果判断有副作用则更不会标记清除
mode: production模式下默认开启摇树不用做任何配置usedExports: true
const webpack require(webpack);
const TerserPlugin require(terser-webpack-plugin);/*** type {webpack.Configuration}*/
module.exports {mode: none,optimization:{sideEffects:true,usedExports:true},plugins:[ new TerserPlugin() ]
};babel配置preset-env没写 module:false 参数
在文章 我掌握的Babel配置 中详细讲解了 module: false 参数简单说不设置false时只针对babel相关的runtime包的引入会使用require设置了false引入会使用import就能让webpack去摇树回到第一点上
module.exports {presets: [ [ babel/preset-env, { modules: false }, ],]
};拆包splitChunks
splitChunks是webpack配置下optimization下的配置即优化。看单词理解意思就是拆分多个chunk。
什么是chunk
webpack的本质是把多个js模块合并到一个js中即一个入口得到一个输出js文件bundle.js。
但是导致的问题是如果这个bundle.js文件很大那么浏览器请求的时候导致请求时间很长首屏长时间白屏。
所以优化手段就是把bundle.js文件拆分成多个小的js文件同时请求首屏当然就更快渲染显示。
所以入口文件chunk文件输出文件三者的关系从原来的一个入口文件对应一个chunk最后输出一个bundle文件改变为一个入口文件对应多个chunk最后输出多个bundle文件
三种方式获得chunk 1、入口文件可以生成chunk入口文件即webpack配置的entry选项 2、异步请求 import函数调用 或者 require.ensure 可以生成chunk 如import函数即我们在写vue-router时写的异步请求路由方式这里webpackChunkName可以魔法定义chunk名也可不写
import(/* webpackChunkName: AboutPage */./view/about.vue)3、webpack配置splitChunks手动拆分生成chunk最后独立输出到js文件
splitChunks 配置
简单配置把react相关包都单独提到一个文件
{optimization: {splitChunks: {chunks: all, // initial、async和allcacheGroups: {react: {name: react,test: /[\\/]react(\w)*[\\/]/i,priority: 10},lodash: {name: lodash,test: /[\\/]lodash(\w)*[\\/]/i,priority: 20,minChunks:3},},},},
}先来看下webpack默认的splitChunks参数 看图production和非production模式下有参数不一样下面这些参数表示自动拆包的条件
chunks
重要拆包的范围默认async只针对异步请求的即上面第二条的import函数调用的chunk里面initial表示只针对初始化入口entry的all表示最大包含async entry
cacheGroups
重要自定义拆包规则name是chunk名test正则包名priority优先级因为同一个包可能符合多个拆包规则会处理给优先级高的看图可知默认会有两个包规则defaultVendors规则表示node_modules会拆到一个chunk包default规则表示只有被两个即以上chunk引用就要拆到一个chunk包
minChunks
拆分前必须共享模块的最小 chunks 数可以不用修改
maxAsyncRequests
浏览器发送异步请求时最大不超过30个请求即上面第二条的import函数调用可以不用修改
maxInitialRequests
浏览器请求入口entry时最大不超过30个可以不用修改
热更新
我们主要是说明热更新的 module.hot.accept()
先来了解一下热更新怎么配置的
热更新配置
装包
npm i -D webpack-dev-server html-webpack-pluginwebpack.config.js
const webpack require(webpack);
const HtmlWebpackPlugin require(html-webpack-plugin);/*** type {webpack.Configuration}*/
module.exports {mode: development,devServer: {port: 3000,open: true,hot: true,},plugins: [ new HtmlWebpackPlugin(), ]
};package.json
scripts: {serve: webpack serve,
},结论
到此热更新配置完成正常写代码但是发现问题了此时更新页面是整个刷新页面的并不是局部刷新怎么回事呢原来需要在每个文件中最后加上module.hot.accept()才会触发局部更新accept可以接受两个参数依赖和回调
exports.f3 function () {console.log(33333);
};
exports.f4 function () {console.log(44444);
};
if (module.hot) {module.hot.accept();
}随即产生了另一个疑问这太麻烦了吧每个文件文件都需要去加module.hot.accept()但是我们在实际写下项目的时候怎么没有写这句呢
原因是不论css、vue、react的loader都帮我们自动加了这句。
css有style-loaderreact有react-hot-loadervue有vue-loader。
对于jsx文件有vue-jsx-hot-loader
{test:/\.jsx?$/,use:[babel-loader,vue-jsx-hot-loader]
}按需加载
一段时间以来我一直把tree shaking和按需加载混为一谈其实应该分开理解这里我主要是想说第三方包的按需加载比如使用element-ui、lodash、vant
tree shaking的前提是使用import导入但是按需加载并不需要
还有一个点需要注意如果是我们封装的库如组件库导出格式根据文件类型不同如是js文件可以为 commonjs es5、esm es5如是vue或react文件esm/commonjs es6/es5 任意都行因为我们用babel-loader时会排除node_modules目录不编译vue-loader等会去编译vue文件
使用babel插件
npm install babel-plugin-component -Dbabel.config.js
module.exports {presets: [[babel/preset-env,{useBuiltIns: usage,corejs: 2,modules: false,},],],plugins: [[babel/plugin-transform-runtime],[babel-plugin-import,{libraryName: vant,libraryDirectory: es,style: true,},vant,],[babel-plugin-import,{libraryName: antd,style: true, // or css},],[babel-plugin-import,{libraryName: lodash,libraryDirectory: ,camel2DashComponentName: false, // default: true},lodash,],[babel-plugin-component,{libraryName: element-ui,styleLibraryName: theme-chalk,},element-ui,],],
};完毕
