module.exports = { optimization: { splitChunks: { chunks: 'all', }, }, }; 二、懒加载 懒加载(Lazy Loading)是一种优化策略,它允许在需要的时候才加载资源,避免了不必要的资源加载,从而提高性能。 组件懒加载:通过Vue的异步组件实现懒加载。 Vue.component('async-component', (resolve) => { require(...
configureWebpack: config=>{//生产环境下清除 console.logif(process.env.NODE_ENV === 'production') {return{ optimization: { minimizer: [newTerserPlugin({ sourceMap:false, terserOptions: { compress: { drop_console:true} } }) ] } } } } }4.使用 compression-webpack-plugin 开启 gzip 压缩 ...
AI代码解释 constTerserPlugin=require('terser-webpack-plugin');module.exports={configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 启用Terser插件进行代码混淆config.optimization.minimizer.push(newTerserPlugin({terserOptions:{mangle:true,// 开启变量名混淆},}));}},}; 在上述示...
optimization = { splitChunks: { cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, maxInitialRequests: 5, minSize: 0, priority: 100 }, common: { chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, max...
上面代码在vue.config.js里,修改configureWebpack项来添加配置,关于optimization.splitChunks的配置,可以参考这个文档,这里可以简单的解释一下上面配置的含义: 每个cacheGroups代表需要抽离的第三方库,这里有两个分别是ant-design-vue和echarts。 test项表示要扫描的node_modules文件路径,这里简单采用了正则来匹配。
].filter(Boolean),optimization: {minimize: isProduction,// 压缩的操作minimizer: [newCssMinimizerPlugin(),newTerserWebpackPlugin(),newImageMinimizerPlugin({minimizer: {implementation:ImageMinimizerPlugin.imageminGenerate,options: {plugins: [ ["gifsicle", {interlaced:true}], ...
config.optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // only package third parties that are initially dependent }, vantUI: { ...
let optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity, minSize: 20000, // 依赖包超过20000bit将被单独打包 cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name (module) { ...
从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分。 splitChunks: { chunks:"async”,//默认作用于异步chunk,值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块,chunk._modu...
{//设置别名,便于访问config.resolve.alias.set('@',resolve('src')).set('views',resolve('src/views'));if(isProduction){config.optimization.minimize(true);// 代码压缩config.optimization.splitChunks({chunks:'all',cacheGroups:{common:{name:'common',chunks:'initial',priority:2,minChunks:2,},}}...