vue项目优化(首页白屏优化)

1.图片懒加载

//使用vue-lazyload
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

更多配置可参考

2.路由懒加载

//Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：
// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')

const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

3.组件懒加载

export default {
    components: {
        historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懒加载
    },
}

4.打包配置分模块chunk

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',       
      minSize: 30000,    //文件的最小体积，小于该体积则不拆分  
      maxSize: 0,  //拆分之前最大的数值，默认为0，即不做限制
      minChunks: 1, //引入次数，根据该模块的引入次数决定是否分离chunk
      name: true,    
    }
  }
};

5.压缩css，js

const UglifyJSPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
module.exports = {
  plugins: [
    // 压缩输出的 JS 代码
    new UglifyJSPlugin({
      compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: false,
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true,
      },
      output: {
        // 最紧凑的输出
        beautify: false,
        // 删除所有的注释
        comments: false,
      }
    }),
  ],
};

6.小图使用url-loader转为base64，减少服务器资源请求

yarn add -D url-loader || npm install url-loader -D
module: {
  rules: [
       {
        test: /\.(jpeg|jpg|png|svg|gif)$/, //处理哪些图片格式
        use: {
          loader: 'url-loader', // 默认使用的是es6模块
          options: { // 配置 
            esModule: false, // 使用common.js规范
            outputPath: 'images', // 输出的文件目录
            name: 'images/[contenthash:4].[ext]', //contenthash，webpack文件后缀hash值的一种类型，也是最常用的，以文件内容作为hash，可以防止文件未修改而多余重新打包或者修改后未重新打包的问题。
            limit: 20*1024 // 小于20k转为base64
          }
        }
      }
  ]
}

[name]/[chunkhash]/[contenthash]

7.配置第三方UI组件按需引入

这里以elementUI示例
主要使用babel-plugin-component插件

8.使用骨架屏或者loading效果降低白屏负效应

插架参考1
插架参考2

9.开始服务器gzip请求，加快资源响应

打包时需要将资源进行gzip压缩，也需要配置项目所在的服务器，因为默认服务器不解压静态资源。
参考配置

10.关闭生产环境的soureMap，减少代码体积

module.exports = {
    productionSourceMap:false
}

11.使用ssr服务端渲染，提高首屏加载速度。

这里可以选择使用nuxt框架。
或者将vue项目结合node自己进行ssr改造

12.使用cdn加速，将打包后的文件上传至cdn服务器，示例：webpack-alioss-plugin //此服务需要购买阿里云服务器方可使用

const WebpackAliossPlugin = require('webpack-alioss-plugin');

const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  publicPath: isProduction ? '//res.xueboren.com/auto_upload_ci/your-project-name/' : '',
  configureWebpack: {
    plugins: isProduction ? [
      new WebpackAliossPlugin(),
    ] : [],
  },
};