Vue项目优化之webpack

Vue项目优化之webpack

1. babel-plugin-transform-remove-console 生产环境去除console
2. compression-webpack-plugin 代码压缩gz
3. 路由的懒加载和按需加载
4. babel-plugin-component 组件的按需引入
5. svg-sprite-loader 使用矢量图
6. vendor文件的拆包
7. 切换多入口模式
8. 打包不生成.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
                }
              }
            })
        }
      )
	}
}

配置以上打包后：生成了2个html文件，分别单独引入其中的js文件