首次加载首页项目时间过长优化，打包文件过大优化-CFANZ编程社区

问题背景： 1.首次加载页面需要2min，半天打不开，会出现白屏的情况，优化后变成30s

2. build之后的文件过大，比如一个main.js文件优化前是7.9M，优化后成1.5M

3.其他js各种告警，异常

问题解决办法：

1.由于项目过于老旧且为不维护状态，好多包是不能用了的

安装依赖，此时会出现各种问题，下载最新的，删除老版本

虽然会很多，但是解决之后会很爽

2.安装插件，compression-webpack-plugin

cnmp i compression-webpack-plugin -D

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }

3.由于是vue/webpack，那么编译用到的核心都依靠babel

更换babel开头的插件为@babel开头的，也就是升级到 babel 7.x ，

对于不存在以 @babel 开头的插件，找到具体插件所在的 github 或者 npmjs 官网，看说明，

        比如，安装 @babel/preset-es2015 的时候，后来打包就警告了，于是找到其官方就有一段提示文字：
As of Babel v6, all the yearly presets have been deprecated. We recommend using @babel/preset-env instead.
        那么 @babel/preset-es2015 和 @babel/preset-env 就不要同时存在了，
最后对于在 .babelrc 或者 webpack 中引用到的 babel 的 presets 和 plugins 部分要相应替换干净

4.发布运行后，发现 js 有错误，定位到具体的 vue 或者 js 文件分析，为什么出错，逐一攻破

5.配置vue.config.js文件

productionSourceMap:false

module.exports = {
  outputDir: `${srcFile}`, // 在npm run build时 生成文件的目录 type:string, default:'dist'
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
}

不然在最终打包的文件中会出现一些map文件，map文件的作用在于：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。

有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
如果不关掉，生产环境是可以通过map文件看到源码的。

6.以上有2min优化到30s，但是还有很大的优化空间，10s以内吧，

1.可以去除无用的js文件及404的文件，因为404会空跑，也会去占用时间

2.可以通过路由懒加载，

3.组件的按需加载，element-ui

4.组件的引用方式可以替换成cdn，

<head>
  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" />
</head>
<body>
  <div id="app"></div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
  <!-- built files will be auto injected -->
</body>

以上还有好的方式可以留言讨论，后面这几条没有一一去试，但讲道理是可以起到一些作用的