作者：余云的TreeShaking1、什么是TreeShaking，就是只导入需要的模块中的代码，不用的代码不打包import{add}from'./math.js';添加(1,2);math.js中有两种方法。如果使用TreeShaking，只会打包add方法。2.如何配置webpack.prod.js生产环境不需要配置这个，即使配置了也没用功能。optimization:{//使用treeshakingusedExports:true}package.json"sideEffects":false,//表示对所有模块使用treeshaking"sideEffects":["@babel/polly-fill","*.css"]//表示排除@babel/polly-fill，排除所有css文件等导入模块使用treeshaking。注意，如果是开发环境，developmenttreeshaking是不会生效的，因为调试的时候sourceMap行数会不准确，生产环境production才会生效ProductionDevelopment1，如何切换开发环境和生产环境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配置文件}代码拆分为什么要拆分代码？？例如。假设我们引入了一个lodash第三方库，它的大小是1MB，我们的业务代码也是1MB。此时不做任何处理，最后打包生成一个2MB大小的main.js。用户打开浏览器，需要请求一个2MB的main.js文件。从“lodash”导入_；//假设lodash有1MB//假设业务代码有1MBconsole.log(_.join(['a','a','c'],"---"))console.log(_.join(['a','b','c'],"---"))此时我们修改业务代码import_from"lodash";//假设lodash有1MB//假设business代码有1MBconsole.log(_.join(['a','xxxxx','c'],"---"))console.log(_.join(['a','b','c'],"---"))重新打包生成main.js2MB。用户需要重新拉取2MB的代码文件。这会使加载时间变慢并且性能不够好。那么有什么好的方法可以解决这个问题呢？第一种方法：同步import_from"lodash"//假设lodash有1MBwindow._=_//假设业务代码有1MBconsole.log(_.join(['a','d','c'],"---"))console.log(_.join(['a','b','c'],"---"))webpack.config.jsentry:{lodash:'./src/lodash.js',main:'./src/index.js'}第一次访问页面，加载main.js：分为vendor~lodash.js1MB和业务代码main.js1MB处这次修改了业务代码，用户不需要重新加载vendor~lodash代码。只需要重新加载main.js优点：可以有效提高代码运行速度，提升用户体验，提高性能缺点：需要手动拆分页面的代码，不够智能第二种方式：同步方式webpack.config.jsoptimization:{splitChunks:{chunks:'all'}}import_from"lodash";//假设1MBconsole.log(_.join(['a','d','c'],"---"))//这里省略了100,000行业务逻辑console.log(_.join(['a','b','c'],"---"))优点：相对于第二种方式，可以自动拆分打包导入main.js和vendors~main.js第三种方式:异步安装插件yarnadd-Dbabel-plugin-dynamic-import-webpack.babelrc"plugins":["babel-plugin-dynamic-import-webpack"]异步代码如下functiongetComponent(){returnimport('lodash').then(({default:_})=>{letelement=document.createElement('span')element.innerHTML=_.join(['x','y'],'-');returnelement;})}getComponent().then(ele=>{document.body.appendChild(ele)})注意：异步代码导入引入的Module，不需要额外配置webpack.config.js，会自动importSplitChunksPlugin配置参数详解1.webpackChunkName修改第三方打包文件名称安装官方依赖npminstall--save-dev@babel/plugin-syntax-dynamic-import.babelrc"plugins":["@babel/plugin-syntax-dynamic-import"]在项目代码中添加name/_webpackChunkName:"lodash"_/functiongetComponent(){returnimport(/*webpackChunkName:"lodash"*/'lodash').then(({default:_})=>{letelement=document.createElement('span')element.innerHTML=_.join(['x','y'],'-');返回元素;})}getComponent().then(ele=>{document.body.appendChild(ele)})注意：生成的代码文件是./dist/vendors~lodash.js如果生成的代码文件不想添加vendors~，而是直接lodash.js然后配置webpack.config.jsoptimization:{splitChunks:{chunks:'all',cacheGroups:{//表示打包后的文件是否要带厂商，不管是同步还是异步。/async表示只进行异步代码拆分，initial表示只进行同步代码拆分，all表示全部同时去cacheGroups.vendorsminSize:30000,//表示只有最小模块大于30000时才进行代码拆分bytes//maxSize:50000,//如果拆分代码的大小超过50000，则会拆分两次。一般配置比较少。表示代码切分必须大于等于2倍maxAsyncRequests:5,//表示不能切分超过5个模块，超过后者的模块不切分maxInitialRequests:3,//表示整个网站主页或条目文件，例如如果代码分割不超过3automaticNameDelimiter:'~',//组和文件名链接符号vendors~main.jsname:true,//表示更新名称，一般不用改cacheGroups:{vendors:{test:/[\\/]node_modules[\\/]/,//如果在node_modules中，则打包到vendors.jspriority:-10,//比如jquery既符合vendors又符合default,值越大，说明优先级越高filename:'vendors.js'//表示所有第三方都打包到一个叫vendors.js的文件里project，走这里，不是node_modules//minChunks:2,priority:-20,//值越大，优先级越高reuseExistingChunk:true,//如果代码已经打包，则不分包重复引用时，但会重复使用之前的文件名：'common.js'}}}}，这里需要注意的是，如果引入同步代码，不会立即划分，而是根据实际情况。对电子感兴趣？请关注我们的开源项目ElectronPlayground，带你快速上手Electron。每周五我们都会挑选一些有趣的文章和新闻与大家分享。快来关注我们的小风周刊吧。我们是好未来小黑板的前端技术团队。我们会经常与您分享最新最酷的行业技术知识。欢迎知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园关注我们。
