使用webpack优化项目

1、生产环境关闭productionSourceMap、css sourceMap

SourceMap是当页面出现某些错误，能够定位到具体的某一行代码，Sourcemap就是帮你建立这个映射关系的，方便代码调试。

判断是否是生产环境
const  isProduction = process.env.NODE_ENV  === 'production'

module.exports = {
    productionSourceMap: !isProduction, // 关闭生产环境的sourcemap的映射文件
    css: {
        sourceMap: !isProduction, //css SourceMap的配置
    }

}

2、分析大文件

安装 npm install webpack-bundle-analyzer -D 插件，打包后会产生一个本地服务，清楚的展示打包文件的包含关系和大小

vue.config.js配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
    ...其他
    configureWebpack: {
        plugins: [
            new BundleAnalyzerPlugin() //分析打包大小的默认配置
       ]
    }
}