优化Vue项目编译文件大小的方法和步骤

与其优化Vue，不如在webpack打包的配置中做一些文章，让Vue的编译文件尽可能的小。下面介绍项目中的优化过程，可能并不适合每个项目，但总体思路是相似的。

布局问题

为了优化，我们必须首先了解问题。也就是说，哪些代码/依赖包导致最终编译的文件过大？

这里，我们需要使用webpack-bundle-analyzer工具。修改package.json文件并添加：

分析“:”节点_ env=生产NPM _配置_报告=真实NPM运行构建”，然后执行：

Npm run analyze将在浏览器中打开一个页面，显示编译后的文件大小和每个部分的内容大小。以下是项目优化前的分析结果：

从图中可以看出，最终编译的vendor.js文件达到5MB，主要来自echarts。另外，由于element-ui在使用时已经注意按需加载组件，可以优化的部分并不多；Lodash是另一个需要优化的核心部分，因为它不是按需加载的。

通过按需加载进行优化

本文主要对lodash进行了优化。当我们使用碘时，如果我们使用：

Import _ from' lodash' _。get (obj，' key '，' default _ value ')，lodash的所有内容都会在编译期间被默认编译和打包。

webpack的引入确实提到了按需加载，但是这个概念可能会被误解。下面我们举一个例子：

//方法1:这将导致从“lodash”加载所有lodash库import _ from。get()//方法2:它只会从' lodash/get'get()加载get方法import get，也就是不添加其他插件和配置，webpack不可能这么智能。

如果您想真正按照我们在使用方法一时使用的方法“按需加载”，您需要使用插件并添加配置：

首先执行：

NPM我-保存-发展巴别塔-插件-洛达什巴别塔-克里巴别塔-预设-es2015然后修改。babelrc:

在{'plugins' : ['lodash']，' preferences ' :[' es 2015 ']}后修改webpack.prod.conf.js:

module : { loaders : [{ ' loader ' : ' babel-loader '，' test': /\。js$/，' exclude': /node_modules/，Query ' : { ' plugins ' :[' lodash ']，' preferences ' :[' es 2015 ']}]}之后可以按需加载lodash。重新分析表明，脉石的大小可以忽略不计。

对于其他第三方库，比如Element-UI，如果我们只使用了很少的组件，建议按需寻找对应的插件和配置模式，这样可以大大减少这部分编译的规模。

路由延迟加载

当我们用Vue-Router构建单页应用程序时，大量的组件会导致第一屏加载缓慢，正如官方文档所说：

当应用程序打包构建后，Javascript包会变得非常大，影响页面加载。如果我们能够将不同路由对应的组件划分为不同的代码块，然后在访问路由时加载相应的组件，效率会更高。简单地说原文：

从“”导入测试./pages/test '导出默认新路由器({ routes: [ { path: '/test '，名称： 'test '，组件： Test }]})；替换为：

const Test=()=import('./pages/test))导出默认的新路由器({ routes: [ { path: '/test '，name: 'test '，component : Test }]})；注意第一行的不同。

第三方库延迟加载

在实际开发中，可能会出现这样的场景：

在某个组件/文件中，需要使用矩第三方库进行时间处理，但其他组件根本不使用。

如果我们引入这样的时刻：

从' moment '导入moment导出默认{data () {}，mounted () {}}，然后库将在vendor.js中合并，导致第一个屏幕加载缓慢。

为了解决这个问题，我们可以改为以下介绍模式：

导出默认值{ name: ' '，beforeCreate () { import('moment ')。然后(module={ this.moment=module});}，data(){ return { moment : null } } }这种方式可以使moment库只在使用组件的地方引入。注意“调用时刻的时机和使用时刻的顺序”应该这样考虑。

注意：如果程序集是页级程序集，请使用路由延迟加载中的方法。

使用CDN外部加载

如上所示，echarts模块占了很大一部分。由于echarts没有按需加载的插件，这里我们通过外部引用来减少编译的规模。

首先，我们修改index.html并从CDN引入echarts文件：

script src=' http :https://cdn . bootscs.com/echart/3 . 7 . 0/echart . min . js '/script请注意，如果需要地图组件，还需要介绍它们。

之后，我们需要从‘echart’中删除所有导入echart的代码，也就是说，echart不会以这种方式引入。

但问题是，如果这样做，webpack会发现echarts变量不存在，并停止编译。解决方案是，我们需要在webpack配置中通知编译器，为echarts变量引入了外部资源。webpack.base.config.js需要修改：

模块。exports={ external s : { ' echart ' : ' echarts ' }，}之后，我们可以直接使用变量e charts而不会导致编译错误。

当我们删除或注释掉之前引入echarts的所有代码时，我们会再次分析它们，发现编译大小要小得多。

经过以上两个步骤，原来的5M编译文件变成了1.67m.

之后，我们还可以根据分析结果进行优化。例如，用更轻的时空替换时间库。

在服务器端打开gzip

Gzip可以用来进一步压缩文件，使服务器发送给浏览器的文件被压缩后，被浏览器接收后再解压缩。要使用这种方法，您需要服务器的支持。以Nginx为例。

在nginx.conf中，添加以下配置：

gzip ongzip _ min _ length 1kgzip _ buffers 4 16k# gzip _ http _ version 1.0gzip _ comp _ level 2；gzip _ types text/plain application/x-JavaScript text/CSS application/XML text/JavaScript application/x-httpd-PHP image/JPEG image/gif image/png application/JavaScript；gzip _ vary off之后刷新页面(注意禁用缓存)，观察对js、css等资源文件的请求是否包含Content-Encoding: gzip。如果存在，则表示gzip已经成功。

请注意，gzip_types指定将使用gzip压缩哪些请求类型。对于不使用gzip的资源文件，其内容类型可以添加到gzip_types中。

服务器端渲染

注意，在上述打包过程的优化中，主要影响供应商. js文件中的第三方库部分(gzip方法会影响所有资源文件)。

如果要继续优化，需要考虑服务器端渲染。

Vue的机制实际上是用js在html中挂载组件。如果能把这个过程放在服务器端，我们就不能再向浏览器传输一些驱动文件，从而进一步减少浏览器所需的文件大小。但是，这个过程需要服务器的额外支持。感兴趣的同学可以参考示例PK (Vue服务器渲染VS Vue浏览器渲染)。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。