代码分割(Code Splitting):将代码分割成多个小块,只加载当前页面所需的代码,可以减少打包后的文件大小,提高页面加载速度。可以使用Webpack的SplitChunksPlugin插件来实现代码分割。 启用gzip压缩:在Webpack的配置文件中启用gzip压缩,可以减小文件大小,加快文件传输速度。可以使用compression-webpack-plugin插件来实现gzip压缩。
即使不匹配任何一个缓存组,splitChunks.* 级别的最小 chunk 属性minSize也会影响所有异步 chunk,效果是体积大于minSize值的公共模块会被拆出。(除非 splitChunks.*chunks: 'initial') 公共模块即>= 2个异步 chunk 共享的模块,同minChunks: 2。 minSize 等属性参考标准 针对3、4两点作特别说明:vue-cli 4 内置 web...
为了进一步优化打包结果,可以使用以下方法: 代码分割:通过配置splitChunks,可以将代码分割成更小的块,从而提高加载速度。 懒加载:通过动态导入import(),可以实现按需加载组件。 压缩代码:使用TerserPlugin来压缩JavaScript代码。 移除console.log:在生产环境中,可以通过配置来移除所有的console.log语句。 const TerserPlugin ...
cacheGroups继承splitChunks里的所有属性的值,如chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、automaticNameDelimiter、name,我们还可以在cacheGroups中重新赋值,覆盖splitChunks的值。另外,还有一些属性只能在cacheGroups中使用:test、priority、reuseExistingChunk // 关闭性能提示 // performance: { // hints...
delete("splitChunks"); } return config; } }; 开启gzip 压缩 npm i -D compression-webpack-plugin const CompressionWebpackPlugin = require("compression-webpack-plugin"); const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV); const productionGzipExtensions = /\.(js|css|...
configureWebpack: (config) => { config.optimization = { splitChunks: { cacheGroups: { // 抽取公共代码 common: { name: 'common', chunks: 'initial', minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1, reuseExistingChunk: true, enforce: true, }, // 抽取公共依赖 vendors: { ...
2、使用splitChunks进行代码分割 node_modules全部打包成chunk-libs并设置优先级为10 将vantUI单独拆包,设置优先级为20 将自己的comnponents打包成common设置优先级为5 module.exports = { chainWebpack(config) { config.optimization.splitChunks({ chunks: 'all', ...
但在新版webpack中,CommonsChunkPlugin被自由度更高,更高级的SplitChunksPlugin代替 这也是为什么我要把项目迁移到vuecli 3(使用webpack4) 默认就做了优化,首页只会下载灰色的部分(235K) gzip 拆完包之后,我们再用gzip做一下压缩 安装compression-webpack-plugin ...
splitChunks: {chunks:"all",cacheGroups: {// layouts通常是admin项目的主体布局组件,所有路由组件都要使用的// 可以单独打包,从而复用// 如果项目中没有,请删除layouts: {name:"layouts",test: path.resolve(__dirname,"../src/layouts"),priority:40, ...
config.optimization.splitChunks({ chunks: 'all' }) } } 加入以上代码后,分成了2个文件,最大的只有2.7M了,这样可以分成多个进行加载,可以达到最快化,但是一定要平衡文件大小的和分割出来的文件数量的平衡, 数量多了, 请求也会变慢的, 影响性能.可以根据项目的进行设置,具体可参考官方文档的详细说明。