短视频制作完成网站,长沙网站的优化,怎么看视频号的网址,wordpress主题 破解主题项目中webpack优化配置
1. 开发效率#xff0c; 体验
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文件夹里面就是将部分引用的包进行了预编译。
优化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,],},
}使用配置后的引入方式 参考1
