Maison > Article > interface Web > Comment optimiser la vitesse de chargement du premier écran des applications monopage dans Vue (détails)

Comment optimiser la vitesse de chargement du premier écran des applications monopage dans Vue (détails)

不言original: 2018-08-27 10:39:063397parcourir

本篇文章给大家带来的内容是关于vue中如何优化单页应用首屏加载速度（详细），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案

使用CDN资源,减小服务器带宽压力
路由懒加载
将一些静态js css放到其他地方（如OSS），减小服务器压力
按需加载三方资源，如iview,建议按需引入iview中的组件
使用nginx开启gzip减小网络传输的流量大小
webpack开启gzip压缩
若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

使用CDN资源,减小服务器带宽压力

在index.html中引入cdn资源

...
  <body>
    <p id="app">
    </p>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
  </body>
  ...

修改 build/webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, &#39;../&#39;),
  entry: {
    app: &#39;./src/main.js&#39;
  },
  externals:{
    &#39;vue&#39;: &#39;Vue&#39;,
    &#39;vue-router&#39;: &#39;VueRouter&#39;,
    &#39;vuex&#39;:&#39;Vuex&#39;,
    &#39;vue-resource&#39;: &#39;VueResource&#39;
  },
  ...
}

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from &#39;vue&#39;
// import VueResource from &#39;vue-resource&#39;
// Vue.use(VueResource)

路由懒加载

const workCircle = r => require.ensure([], () => r(require(&#39;@/module/work-circle/Index&#39;)), &#39;workCircle&#39;)
const workCircleList = r => require.ensure([], () => r(require(&#39;@/module/work-circle/page/List&#39;)), &#39;workCircleList&#39;)

将一些静态js css放到其他地方（如OSS），减小服务器压力

注意这里的js文件，需要将结果抛出，然后在需要用到该js的组件中import引入

按需加载三方资源，如iview,建议按需引入iview中的组件

按需引用请查看iview官方文档iview

使用nginx开启gzip减小网络传输的流量大小

配置nginx，可以参考Nginx开启Gzip压缩大幅提高页面加载速度

webpack开启gzip压缩

这里需要配合Nginx服务器，Nginx开启gzip

config/index.js中

module.exports = {
  build: {
    ...
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: true, // 就是这里开启gzip,vue-cli搭建项目，这里默认为false
    productionGzipExtensions: [&#39;js&#39;, &#39;css&#39;],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

build/webpack.prod.conf.js中

使用vue-cli构建项目时，默认会有这段代码

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require(&#39;compression-webpack-plugin&#39;)
  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: &#39;[path].gz[query]&#39;,
      algorithm: &#39;gzip&#39;,
      test: new RegExp(
        &#39;\\.(&#39; +
        config.build.productionGzipExtensions.join(&#39;|&#39;) +
        &#39;)$&#39;
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

若首屏为登录页，可以做成多入口，登录页单独分离为一个入口

Articles Liés

Voir plus