vue/cli4.2.3打包的一些优化配置

• 前端开发完项目之后，会进行打包，就会涉及到性能优化（比如vue中首页白屏太久等）问题，想要进行性能优化，首先要知道哪里可以进行优化，可以借助工具帮助分析文件哪里可以进行优化：

• 可视化分析包大小

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

在vue.config.js中配置：

module.exports = {
    chainWebpack: config => {
        config
        .plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        }
       }

这时候需要注意了，如果你给自己的应用在开发环境设置了默认的端口号8888，如下：

就会引起冲突，因为默认的文件分析大小端口号就是8888，

运行：

yarn serve

我这里配置了会自动打开两个窗口：

1. http://127.0.0.1:8888/ 可以看到直接打包后的文件大小可视化图，性能优化的地方可以从这里入手，比如element-ui,在这里我是使用了按需加载，会比较小，如果没有按需加载的话，可以进行优化处理一下，但是这里边的代码并不多，仍然1.29M，所以可以进行优化一下。
   
2. 我写是一个增删改操作（后续代码可以分享）
   

• 关掉map：线上报错时定位到代码位置,可以关掉

vue.config.js

module.exports = {
  productionSourceMap: false
  }

• simple-progress-webpack-plugin：用来查看打包进度

cnpm install  ghost-progress-webpack-plugin -D

如下图：

module.exports = {
    configureWebpack: {
        plugins: [
            // 开启打包进度
            new SimpleProgressWebpackPlugin()
        ]
    }
    }

• compression-webpack-plugin： 压缩代码

cnpm install compression-webpack-plugin --save-dev

这是我原来的文件大小：

开启压缩后：

打包后运行dist文件（需要开启服务，图片的路径也要改一下）就可以看到效果

没压缩时（本地运行）：

ETag: 只是代表网络资源的一个标识，初次请求，状态码200，再次刷新请求，如果文件没有发生改变，状态码304，可以用来减少带宽。看到有人解释加上W/ 就是压缩后，我当时信了，其实并不是， 详情可了解HTTP 中文开发手册

按需要引入

babel.config.js(之前都是手动创建.babelrc文件，现在的话，创建项目就会自动生成这个文件，按需引入的配置可以放在这里)

module.exports = {
    "presets": [
        "@vue/app"
    ],
  plugins: [
    [
        "component",
        {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
        }
    ],
    [
        "import",
        {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
        }
    ]
]
}

main.ts（最近在学习typescript，就加入了）

import { Button, Select, Dialog } from 'element-ui';
Vue.use(Button);
Vue.use(Select);
Vue.use(Dialog);

多线程：提高打包速度
先看看效果，这是没有开启之前打包需要花费的时间

加入之后，加快了打包的效率：

安装：

cnpm install  happypack -D

使用：

const HappyPack = require('happypack')

module.exports = {
 chainWebpack: config => {
       // 多线程
      config.plugin('HappyPack').use(HappyPack, [
        {
          loaders: [
            {
              loader: 'babel-loader?cacheDirectory=true'
            }
          ]
        }
      ])
 }
}

小提示：

• –save-dev : 保存到 package.json 的 devDependencies 依赖中，缩写：-D （开发环境）
• –save : 保存到 package.json 的 dependencies 依赖中， 缩写 ： -S （生产环境）

虽然上述的操作已经把代码整体优化了很多，但仍然还可以进行优化，比如代码切割、懒加载、雪碧图（个人不是很看好这个，哈哈哈）、webp(这个很值得引入)等等。后续会持续更新补充。