美文网首页
vue项目优化(首页白屏优化)

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

作者: GuitarHusky | 来源:发表于2022-03-01 10:51 被阅读0次
    1.图片懒加载
    //使用vue-lazyload
    import Vue from 'vue'
    import VueLazyload from 'vue-lazyload'
    Vue.use(VueLazyload)
    
    <div id="container">
        <img v-for="item in imgs" v-lazy="item.url">
        <img v-for="item in imgs" v-lazy:background-image="item.url">
    </div>
    

    更多配置可参考

    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(),
        ] : [],
      },
    };
    

    相关文章

      网友评论

          本文标题:vue项目优化(首页白屏优化)

          本文链接:https://www.haomeiwen.com/subject/fnedrrtx.html