南宁工程造价建设信息网站,易企网站建设,免费高清视频素材app哪里找,南昌企业制作网站源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入#xff08;如lodash包#xff09;的代码 1mb若更新了业务逻辑代码#xff0c;但在浏览器运行时每次都下载2mb的index.js显然不合理#xff0c;第三方包是不会变的 手动拆分 webpack.base.js entry: {main: path.re…源代码index.js里包含2部分① 业务逻辑代码 1mb② 引入如lodash包的代码 1mb若更新了业务逻辑代码但在浏览器运行时每次都下载2mb的index.js显然不合理第三方包是不会变的 手动拆分 webpack.base.js entry: {main: path.resolve(__dirname, ../src/index.js),loadsh: path.resolve(__dirname, ../src/lodash.js), },lodash.js import _ from lodash window._ _index.js const res _.join(test, 1) console.log(1, res)打包后index.html script typetext/javascript srcjs/main.js/script script typetext/javascript srcjs/loadsh.js/script使用webpack插件 https://webpack.docschina.org/plugins/split-chunks-plugin/#defaults 配置optimization依然在index.js中引入lodash.js entry: {main: path.resolve(__dirname, ../src/index.js), }, optimization: {splitChunks: {chunks: all // 同步/异步代码都要做分割} },异步代码 index.js // 异步代码 // 只有执行createElement函数时才会引入lodash打开打包后的index.html才会下载0.js // 若不执行则不下载 // 异步代码不管是否执行编译都会生成0.js function createElement() {return import(lodash).then(({ default: _ }) {const res _.join([1, 2, 3], *)const div document.createElement(div)div.innerText resreturn div}) } createElement().then((div) {document.body.appendChild(div) })注意异步代码webpack.base.js中不需要配置optimization打开页面时0.js会延迟一点下载 代码分割重命名 import前添加注释webpackChunkName: my-loadsh function createElement() {return import(/* webpackChunkName: my-loadsh */ lodash).then(({ default: _ }) {const res _.join([1, 2, 3], *)const div document.createElement(div)div.innerText resreturn div}) } createElement().then((div) {document.body.appendChild(div) })vendors从哪来 webpack.base.js 配置cacheGroups后 optimization: {splitChunks: {chunks: all,cacheGroups: {vendors: false,default: false,}} },可配置minSize 对多大的文件分割打包minChunks 在入口中引入模块次数 n时才会做代码分割