前端页面加载速度优化解决方案

随着前端各种框架的日益完善，一些基本的性能优化和加载优化都已经很完善了，但是有些必要的优化还是得开发者自己去做。vue.js是一个比较流行的前端框架，与react.js、angular.js相比来说，vue.js入手曲线更加流畅，不管掌握多少都可以快速上手。但是单页面应用也都有其弊病，有时候首屏加载慢的让人捏舌。今天我们以vue cli2.x来说一说如何行之有效的缓解此问题！以项目为例，输入网址以后会出现十几秒的空白页，如果是后台管理系统还能接受，嵌套式的H5面对的是C端用户，产品肯定是无法接受的。仔细分析了下，主要是打包后的app.js太大，以及我们引用的一些插件安装包加载比较慢，在网上搜了很多解决加载慢的方案，最终优化的时间移动端H5页面2秒多，后台管理系统5秒多。下面，将自己在平时项目上所做的优化策略实践分享于大家。



方案一、路由懒加载

1. {
   
2.     path: '/home',
   
3.     name: 'home',
   
4.     component: r => require.ensure([], function (require) {
   
5.       r(require('views/hls/Home/Home.vue'))
   
6.     }, 'home'),
   
7.     meta: {
   
8.       title: '首页',
   
9.       keepAlive: false,
   
10.       hasTop: true,
    
11.       hasBottom: true
    
12.     }
    
13.   }
    
14. 复制代码

复制代码

方案二、组件按需加载（代码分割）

1. 首先引入按需加载工具 babel-plugin-import

babel-plugin-import是babel它会在编译过程中将 import 的写法自动转换为按需引入的方式。

1. npm install babel-plugin-import --save-dev
   

复制代码

2. 在项目根目录创建.babelrc文件并配置按需加载内容:

1. {
   
2. "plugins": [["import", {
   
3.   "libraryName": "iview",
   
4.   "libraryDirectory": "src/components"
   
5. }]]
   
6. }

复制代码

3. webpack配置：

1. // webpack.config.js
   
2. module.exports = function ({ production = false, development = false }) {
   
3.   ...
   
4.   output: {
   
5.     path: path.resolve(__dirname, 'build'),
   
6.     filename: 'static/js/[name].[contenthash:8].js', // 主文件分割出的文件命名
   
7.     chunkFilename: 'static/js/[name].[contenthash:8].chunk.js', // splitChunks 分割出的文件命名
   
8.   },
   
9.   
   
10.   optimization: {
    
11.       minimize: true,
    
12.       ...
    
13.       splitChunks: {
    
14.         chunks: 'all',
    
15.         cacheGroups: {
    
16.           default: false,
    
17.           vendors: false,
    
18.           // 多页面应用，或者 webpack import() 多个 chunk 文件中，有 import 其他模块两次或者多次时，会打包生成 common
    
19.           common: {
    
20.             chunks: "all",
    
21.             minChunks: 2,
    
22.             name: 'common',
    
23.             enforce: true,
    
24.             priority: 5
    
25.           },
    
26.           // node_modules 中的公共模块抽离
    
27.           vendor: {
    
28.             test: /[\\/]node_modules[\\/]/,
    
29.             chunks: 'initial',
    
30.             enforce: true,
    
31.             priority: 10,
    
32.             name: 'vendor'
    
33.           },
    
34.           // @materual-ui
    
35.           material: {
    
36.             name: 'chunk-material',
    
37.             priority: 20, // 优先级高于 vendor
    
38.             test: /[\\/]node_modules[\\/]_?@material-ui(.*)/
    
39.           },
    
40.         }
    
41.       },
    
42.       runtimeChunk: { // 运行时代码（webpack执行时所需的代码）从主文件中抽离
    
43.         name: entrypoint => `runtime-${entrypoint.name}`,
    
44.       },
    
45.     },
    
46. })

复制代码