Vue项目优化之webpack

最新推荐文章于 2024-07-29 16:45:57 发布

_会飞的肥牛

最新推荐文章于 2024-07-29 16:45:57 发布

阅读量230

点赞数 1

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_46759393/article/details/120530418

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue项目的webpack配置优化，包括使用babel-plugin-transform-remove-console移除生产环境的console，利用compression-webpack-plugin进行代码压缩，实现路由懒加载和按需加载，运用babel-plugin-component组件按需引入，使用svg-sprite-loader处理矢量图，拆分vendor文件，切换多入口模式，并且打包时不生成.map文件。通过vue.config.js的配置，成功生成两个独立引入JS文件的HTML页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue项目优化之webpack

babel-plugin-transform-remove-console 生产环境去除console
compression-webpack-plugin 代码压缩gz
路由的懒加载和按需加载
babel-plugin-component 组件的按需引入
svg-sprite-loader 使用矢量图
vendor文件的拆包
切换多入口模式
打包不生成.map文件

6.7.8点配置vue.config.js如下：

vendor文件的拆包
切换多入口模式
打包不生成.map文件

module.exports = {
	publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    productionSourceMap: false,//打包不生成.map文件

	pages:{
        index:{//配置多入口
            entry: "./src/main.js",
            template: "./public/index.html" //模板
        },
        test:{
            entry: "./src/test.js",//创建一个test.js文件随便写几个代码
            template: "./public/index.html"
        }
    },
	
	chainWebpack(config) {
	  config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .optimization.splitChunks({ //vendor文件的拆包
              chunks: 'all',
              cacheGroups: {
                libs: {
                  name: 'chunk-libs',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                  chunks: 'initial' // only package third parties that are initially dependent
                },
                elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
                  priority: 20, // 重量需要大于libs和app，否则会被打包成libs或app
                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // 匹配 cnpm
                },
                commons: {
                  name: 'chunk-commons',
                  test: resolve('src/components'), // 可以自定义规则
                  minChunks: 3, //  最少公共的数量
                  priority: 5,
                  reuseExistingChunk: true
                }
              }
            })
        }
      )
	}
}