vue 打包优化

vue 打包优化

路由按需加载

通过vue写的单页应用时，可能会有很多的路由引入。当打包构建的时候，javascript包会变得非常大，影响加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度。

    const Home = () => import( './Home.vue')
    const router = new VueRouter({
      routes: [
        { path: '/home', component: Home }
      ]
    })

动态import()打包出来文件的name是按照0,1,2...依次排列，如0.js、1.js等，有的时候我们希望打包出来的文件名是打包前的文件名称。webpackChunkName 可以设置打包后的文件名称。

const Home = () => import(/*webpackChunkName:'Home'*/ './Home.vue')

大多数情况下使用动态import()循环加载的，这样就需要进入变量，使用[request]来告诉webpack，这里的值是根据后面传入的字符串来决定。

import(/* webpackChunkName: "[request]" */ `@/components/${view}.vue`)

app.js vendor.js manifest.js

CDN

#### 为什么使用CDN

​ 在前端工程中，将静态文件放到CDN上，可以直观地减小资源包大小，同时加快首屏加载。

1. 若不使用CDN，则所有的资源都会被打包到app.js和vendor.js中，页面需要等到这两个包下载完成才可以显示。
2. 若使用CDN，则可以利用浏览器多线程的优势，同时下载若干静态文件以及剩下的app.js和vendor.js，以此达到加快加载的目的。

首先，在index.html的头部引入cdn资源

	<script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
    <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
    <script src="//unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
    <script src="//unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    <script src="//unpkg.com/echarts@4.5.0/dist/echarts.min.js"></script>

在webpack设置中添加externals（外部扩展)设置，如此，则import 引用的资源将不被打包，而是在运行时从外部获取。

  configureWebpack: (config) => {
  	config.externals = {
    	'vue': 'Vue',
    	'element-ui': 'ELEMENT',
        'vue-router': 'VueRouter',
        'axios: 'axios',
        'echarts': 'echarts',
   }  

},

Gzip打包压缩

安装插件

	yarn add -D compression-webpack-plugin

在文件vue.config.js里导入compression-webpack-plugin，并添加压缩文件类型

    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i

在configureWebpack 里配置如下代码

module.exports = {
  productionSourceMap:false,
  configureWebpack: (config) => {
    config.plugins.push(
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: productionGzipExtensions, // 匹配需要压缩的后缀名
        threshold: 10240, //只有大小大于该值的资源会被处理单位字节
        minRatio: 0.8,    //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。
      }),
    )
  },

Nginx配置
​```js
 server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    location /appShare {
       client_max_body_size    10m;
       root /home/test/webIndex/appShare;
       try_files $uri $uri/ /appShare/index.html;
       index index.htm index.html;
    }

}

关闭SourceMap

在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题的。

优点 ： 对于开发者开说，方便调试，可以看到源代码

缺点： 生成的sourcemap文件会增加打包的体积。线上用户也能看到源代码。

构建结果输出分析

在 Vue 项目中用到的分析工具：webpack-bundle-analyzer 。它以图形的方式将结果更直观地展示出来，分析打包后的每个模块的大小。

安装插件

	yarn add -D webpack-bundle-analyzer

在文件vue.config.js里导入compression-webpack-plugin

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

    module.exports = {
      configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          config.plugins.push(new BundleAnalyzerPlugin())
        }
      },

执行yarn run build --report 后生成分析报告

stat (打包之前输入的文件大小)

parsed（打包之后输出的文件大小）

gzipped（开启gzip压缩后的文件大小）