提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园

标签： | 发表时间：2019-11-07 07:40 | 作者：
出处：https://www.cnblogs.com

本教程是针对vue-cli3以上的版本，其实原理都大同小异，这个demo为vue-cli直接创建的项目，并在main.js中引入了 echart、 element-ui、 lodash

首先看demo打包后生成的文件大小，这个demo里面什么业务都没写、仅仅引入了几个包，chunk-vendors.js就达到了1.6M之多，如果是写入了庞大的业务后没做任何优化处理，那么这个文件可能会达到10M之多，这发生在我真实的项目经历中

借助webpack-bundle-analyzer帮助分析

首先安装webpack-bundle-analyzer

      yarn add webpack-bundle-analyzer -D

然后在项目根目录创建vue.config.js，然后在文件中写入以下代码

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

module.exports = {
    configureWebpack: {
        plugins: [new WebpackBundleAnalyzerPlugin()]
    }
}

然后执行 yarn build在浏览器会自动打开我们的使用包分析文件，大致如下图的样子

我们可以看到生成的最大文件为 chunk-vendors.js，这个文件主要又由 echarts、 element-ui、 lodash、 zrender组成，其中 echarts、 element-ui、 lodash为我们项目开发时必要引入的文件，所以我们如果把这写文件分离出来那么文件自然就会小了很多

如何分离这些文件

我们可以借助wepack配置项里面的 externals来达到目的，在 vue.config.js里面加入如下代码

      module.exports = {

    // ... other code
    
    configureWebpack: {
    
    // ... other code
    
        externals: {
            "lodash": '_',
            "vue": 'Vue',
            "echarts": 'echarts',
            "element-ui": 'ELEMENT',
        },
        
        // ... other code
        
    }
    
    // ... other code
    
}

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。我们可以通过script标签引入这些资源，具体关于externals的介绍请点击 这里
然后我们再对应的 public -> index.html文件加入以下代码，其中BASE_URL指的是public目录，你需要从官网下载对应的资源放在对应的目录下

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>optimize_vue</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but optimize_vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="<%= BASE_URL %>js/pace.min.js"></script>
    <script src="<%= BASE_URL + (process.env.NODE_ENV === 'development' ? 'js/vue-2.6.0.js' : 'js/vue-2.6.0.min.js') %>"></script>
    <script src="<%= BASE_URL %>js/element-ui-2.11.1.js"></script>
    <script src="<%= BASE_URL %>js/lodash.min.js"></script>
    <script src="<%= BASE_URL %>js/echarts.min-4.4.0.js"></script>
  </body>
</html>

然后我们再看一下效果， lodash、echarts、elementui已经成功从webpack bundle分离出去了，打包后的 chunk-vendors.js也只有24kb的大小

使用路由懒加载

路由懒加载会只加载当前页面需要的资源，代码如下

      const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
// or
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

注意如果使用import方式的引入需要安装 @babel/plugin-syntax-dynamic-import，然后在babel.config.js中加入下面代码即可

      module.exports = {
    
  // ... other code
  
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
  
  // ... other code
  
}

关于process.env.NODE_ENV

相信大家在开发的时候一定会有跟多个开发环境，比如development/feature/sandbox/production，因为这玩意我真是吃了大亏，刚开始没看文档， 直接在执行package.json的script命令的时候通过cross-env NODE_ENV=xxx 来修改环境变量，导致无法使用vue-cli工具为我们提供的代码优化功能

注意: process.env_NODE_ENV的值只能为 development、 production，不要修改为其他值，不然可能会出现其他问题，如果你真的想在不同的环境使用不同的接口地址或者、其他的内容我们可以用vue-cli为我们提供的 --mode达到目的，比如

      "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:sanbox": "vue-cli-service build --mode sanbox",
    "build:feature": "vue-cli-service build --mode feature",
    "lint": "vue-cli-service lint",
    "precommit": "yarn lint"
}

这里vue-cli会读取项目根目录下的.env/.env. /.env..local相关文件 ***指的是--mode的值，--mode会修改process.env.NODE_ENV的值，我们需要再对应的env里面把NODE_ENV改写回来，比如一个 .env.sanbox环境代码如下

      NODE_ENV=production
VUE_APP_ENV=sanbox

当我们执行 yarn build:sanbox的时候就会加载这个文件，我们可以通过 process.env.VUE_APP_ENV来访问对应设置的值，注意只有 VIE_APP_前缀的环境变量才会被 webpack.DefinePlugin静态嵌入到客户端侧的包中。

比如我们需要不同的构建命令构建不同的的publicPath的时候我们可以这样做

      const map = {
    production: '/',
    feature: '/feature',
    sanbox: '/sanbox',
    development: '/development',
}
const env = process.env.VUE_APP_ENV
const publicPath =  map[env]
const PATH = require('path')
const WebpackBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
    publicPath,
    configureWebpack: {
        externals: {
            "lodash": '_',
            "qiniu": 'qiniu',
            "vue": 'Vue',
            "echarts": 'echarts',
            "element-ui": 'ELEMENT',
        },
        resolve: {
            extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
            alias: {
                '$root': PATH.resolve(__dirname)
            }
        },
        plugins: [new WebpackBundleAnalyzerPlugin()]
    }
}

到这里就所有功能大功告成了，可以美滋滋的去喝一杯咖啡了。

相关 [页面 加载 速度] 推荐：

页面加载速度优化的12个建议

- - Web前端 - ITeye博客
Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性，同时指出很多网站都没有利用最佳的页面优化技术，页面加速速度都存在很大缺陷. 那么该如何补救，提高网站页面的加载速度呢. 报告给出了12个页面加载速度优化的补救措施，用以改善加载时间，改善站长浏览者的用户体验.

提高首屏页面加载速度，解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园

- -
本教程是针对vue-cli3以上的版本，其实原理都大同小异，这个demo为vue-cli直接创建的项目，并在main.js中引入了. 首先看demo打包后生成的文件大小，这个demo里面什么业务都没写、仅仅引入了几个包，chunk-vendors.js就达到了1.6M之多，如果是写入了庞大的业务后没做任何优化处理，那么这个文件可能会达到10M之多，这发生在我真实的项目经历中.

从app加载页面说开去

- - 百度MUX
都说好的交互设计的评判标准之一是“别让我等”，但互联网产品总是受制于实际的网络问题. 移动端产品则更为明显，2G、3G环境下加载不够给力，wifi环境也未必每次都是那么顺利. 因此“别让我等”更像是种奢望，我们倒应该思考的是“如何优雅而不令人烦躁的等”. 与之最直接关联的就是app加载页面的设计. 一个app加载页面，大致分为3类：.

HTML5的页面资源预加载技术(Link prefetch)加速页面加载

- - HTML5资源教程
不管是浏览器的开发者还是普通web应用的开发者，他们都在做一个共同的努力：让Web浏览有更快的速度感觉. 有很多已知的技术都可以让你的网站速度变得更快：使用CSS sprites，使用图片优化工具，使用.htaccess设置页面头信息和缓存时间，JavaScript压缩，使用CDN等. 我曾经介绍过本站上使用的一些速度优化技术.

管理好页面图片，减少页面加载时http连接，优化页面

- - ITeye博客
浏览器渲染页面的时候，遇到图片标签或者css中的背景图片设置，先会到本地缓存中寻找是否已经下载了这张图片，如果已经下载过了就直接从缓存中加载；否则会到图片指定的路径下载到本地缓存. 而且这种下载是阻塞式的（部分浏览器内核已经实现异步加载图片. 也就是说在下载这些图片的时候，页面渲染处于暂停状态，必须等到图片下载完成了再继续渲染.

Chrome 17将大幅提升网页加载速度

- 韬光养晦 - cnBeta.COM
据国外媒体报道，Chrome 17已经作为Chromium nightly版通过Webkit渠道发布，这是Google今年发布的第九个修订版浏览器. 新版Chrome首次整合HTTP管线化(HTTP pipelining)技术. 用户可以通过chrome://flags进入设置界面，点击HTPP Pipelining选择框激活这项功能.

JavaScript表格组件加载速度测试

- - 博客 - 伯乐在线
网络技术一直在发展并提高，人们期望Web应用程序能提高桌面程序那样的性能和用户体验. 而数据表格又是企业级Web应用最为重要的部分，我们已经用了大量的数据（行数和列数）来测试流行的 JavaScript 表格的页面加载速度. 在我们的测试中，我们针对每种表格组件创建了一个示例，在页面中用不同的行数和列数初始化表格.

优化listview的加载速度getview写法

- - Web前端 - ITeye博客
在android开发中Listview是一个很重要的组件，它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局，但当listview有大量的数据需要加载的时候，会占据大量内存，影响性能，这时候就需要按需填充并重新使用view来减少对象的创建. 最快的方式是定义一个ViewHolder，将convetView的tag设置为ViewHolder,不为空时重新使用即可 static class ViewHolder { TextView text; ImageView icon; }.

网页加载速度 最多不能超过3秒！

- - 雷锋网
【编者按】本文由Cucumbertown联合创始人Cherian Thomas撰写，阐述了其对网页加载的看法. 在Cucumbertown我们运用各种方法来确保我们的页面加载时间保持在2秒内，最多不能超过3秒，我们真的非常看重这个. 如果响应超过3秒的话我们就会收到不少的警报. 几天之前，那时候Chris Zacharia还没写那篇说明页面权重重要性及 YouTube应对之策的文章.

10余种提升WordPress博客加载速度的方法

- - 软矿
我们都知道一个网站的加载速度直接影响到搜索引擎爬虫对网站页面的抓取，也直接影响到网站用户体验. 网站加载速度过慢会造成搜索引擎无法抓取到页面内容而丢弃对该网站的一些页面的收录，同时可以丢失部分用户. 在月光博客读到SEOtime一篇较好的文章，小编转载过来以借花敬佛，愿对一些正在建站或者即将要建站的朋友有所帮助.