深圳福田专业网站推广,网站制作网站维护,制定一个网站建设方案,渗透wordpress论坛项目中webpack优化配置
一. 开发效率#xff0c; 体验
1. DLL#xff08;开发过程中减少构建时间和增加应用程序的性能#xff09;
使用 DllPlugin 进行分包#xff0c;使用 DllReferencePlugin(索引链接) 对 manifest.json 引用#xff0c;让一些基本不会改动的代码先…项目中webpack优化配置
一. 开发效率 体验
1. DLL开发过程中减少构建时间和增加应用程序的性能
使用 DllPlugin 进行分包使用 DllReferencePlugin(索引链接) 对 manifest.json 引用让一些基本不会改动的代码先打包成静态资源避免反复编译浪费时间。
使用方式如下
DLL 配置文件 comfig/dll.js
const path require(path)
module.exports {entry: [vue,vue-router,axios,element-ui,echarts, // 可视化clipboard, // 复制crypto-js, // 加密js-cookie,js-md5,],output: path.join(__dirname, ../public/vendor),inject: true,open: false,cacheFilePath: path.resolve(__dirname, ./public)
}在vue.config.js引入配置 ··· const dllConfig require(‘./config/dll’) module.exports { publicPath: ‘/’, outputDir: ‘’, assetsDir: ‘static’, pluginOptions: { dll: dllConfig }, } ···
在package.json中添加 scripts: {dll: vue-cli-service dll,},第一次dev时运行以下命令 // 打包第三方包提高打包效率npm run dll运行完之后会在public目录下创建一个vendor文件夹里面就是将部分引用的包进行了预编译。
2. 优化resolve.modules配置和resolve.alias配置避免输入很长的路径 resolve.modules告诉webpack去那个目录下查找引用的模块。 resolve.alias使用别名减少输入路径长度相比resolve.modules因为没有省略路径会直接去别名路径查找减少搜索时间。
优化引入模块的路径
{resolve: {alias: {: resolve(src),bizComp: resolve(src/components-biz),service: resolve(src/service), // 接口utils: resolve(src/utils),mixins: resolve(src/mixins)},modules: [path.resolve(__dirname, src),path.resolve(__dirname, node_modules),node_modules,],},
}使用配置后的引入方式
3. Tree Shaking 剔除无用死代码缩小体积
Tree Shaking 是指在构建过程中通过静态分析去除 JavaScript 中未被引用的死代码未被使用的代码以减小最终打包后文件的大小。 这个术语通常与使用 ES6 模块语法import 和 export的项目相关联因为 ES6 模块系统允许静态分析即在编译时就能确定模块的依赖关系。 Tree Shaking 的过程是这样的
识别未被使用的代码 构建工具例如 Webpack会分析你的代码识别出哪些模块、变量或函数根本没有被其他部分引用或使用。移除未被使用的代码 一旦工具确定了哪些代码是“死”的即未被引用的它们就会被从最终生成的包中剔除以减小打包后文件的体积。 Tree Shaking 有助于优化你的应用程序因为它可以去除未被使用的代码减少最终部署时需要加载的文件大小提高加载速度和性能。这对于大型的项目尤其重要因为它们往往包含很多未被使用的功能或库。 然而Tree Shaking 并非适用于所有情况。例如对于动态导入的模块、含有副作用但没有被标记为副作用的代码等它可能无法完全消除所有未使用的代码。因此在使用 Tree Shaking 时需要注意一些限制和边界情况并结合其他优化技术以达到最佳效果。
注使用Tree Shaking, 包必须使用ES6模块语法即export导出 和import ... from ... 引入函数
webpack配置 optimization: {/*** usedExports 需要与 UglifyJsPlugin 或 TerserPlugin 等压缩插件配合使用以便在打包过程中剔除未被使用的代码。*/usedExports: true, // Webpack 会分析你的代码只导出被使用的部分而不包含未被使用的部分。这个选项在 Tree Shaking 中发挥了关键作用。sideEffects: true, // 告知 webpack 去辨识 package.json 中的 副作用 标记或规则minimize: true,minimizer: [new TerserJSPlugin({cache: true,parallel: true, sourceMap: false,}),],},package.json sideEffects: [./src/utils.js // 没副作用的路径--- 会移除没有被使用的代码和副作用代码], sideEffects: true, // 纯粹的无副作用 --- 会移除没有被使用的代码和副作用代码sideEffects: false, // 都有副作用 ---- 不移除副作用代码参考1
