vue-cli3 打包优化之 splitchunks Dllplugin 可以把常用库抽离出来,包括 vue,vuex之类的库。但是 ant design vue 是按需加载,且随时有可能引入新的组件,显然不适合放进 dll 中。直接和其他文件打进 vendor.js 有会很大,所以需要将其再单独抽离出来,我决定在 config.optimization.splitChunks 配置如下: const IS_PR...
Webpack SplitChunks:配置Webpack的SplitChunks插件,可以将公共代码抽取成单独的文件。 module.exports = { optimization: { splitChunks: { chunks: 'all', }, }, }; 二、懒加载 懒加载(Lazy Loading)是一种优化策略,它允许在需要的时候才加载资源,避免了不必要的资源加载,从而提高性能。 组件懒加载:通过Vue的...
Vue CLI 测试版本:@vue/cli 4.5.4 回到顶部 目录 去掉console.log 添加打包分析 使用SplitChunksPlugin分离第三方模块 ⚡去掉console.log // 内置插件不需要安装constTerserPlugin=require('terser-webpack-plugin')// 方法一:简单配置module.exports= {optimization: {minimizer: [newTerserPlugin({terserOptions: {...
运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然后首次加载不需要用到的插件可不用在main.js中引入 "dev": "vue-cli-service serve","pro": "vue-cli-service serve --open --mode production","build:prod": "vue-cli-service build","report"...
这些在使用Vue Cli的项目中已经自动帮我们做好了,主要利用了optimization.splitChunks配置,但是当我们把这些公用的模块都堆在一个模块中,这个文件可能异常巨大(一般是app.js,首屏就会加载这个文件,引用的公共第三方库越多,这个文件越大),也是不利于网络请求和页面加载的。所以我们需要把这个公共模块再按照一定规则进一步...
2、使用splitChunks进行代码分割 node_modules全部打包成chunk-libs并设置优先级为10 将vantUI单独拆包,设置优先级为20 将自己的comnponents打包成common设置优先级为5 module.exports = { chainWebpack(config) { config.optimization.splitChunks({ chunks: 'all', ...
vue build test 环境包很大 vuecli build splitChunks: { // 表示选择哪些 chunks 进行分割,可选值有:async,initial和all chunks: "async", // 表示新分离出的chunk必须大于等于minSize,默认为30000,约30kb。 minSize: 30000, // 表示一个模块至少应被minChunks个chunk所包含才能分割。默认为1。
{ limit: 1024 })) config.optimization.splitChunks({ chunks: 'all',// async表示抽取异步模块,all表示对所有模块生效,initial表示对同步模块生效 cacheGroups: { vendors: { test: /[\/]node_modules[\/]/,// 指定是node_modules下的第三方包 name: 'chunk-vendors', chunks: 'all', priority: -10 ...
optimization: { splitChunks: { chunks: 'all', }, }, }; 二、配置Vue CLI来实现代码拆分 Vue CLI内置了对Webpack的支持,使得代码拆分变得更加简单和直观。 2.1、修改vue.config.js 在Vue CLI项目中,可以通过修改vue.config.js文件来配置Webpack的拆分策略。
config.optimization = { // 分割代码块 splitChunks: { cacheGroups: { //公用模块抽离 common: { chunks: 'initial', minSize: 0, //大于0个字节 minChunks: 2, //抽离公共代码时,这个代码块最小被引用的次数 }, //第三方库抽离 vendor: {