zoukankan      html  css  js  c++  java
  • vue-router 路由懒加载

    webpack打包会将所有资源文件合并压缩成一个文件,导致最终的文件非常大,甚至超过几M,以致页面首次加载会比较慢,如下图:

    其中红色标出的是在浏览器中加载的js文件,gzip压缩前已经达到500多KB了。

    再看看路由按需加载后:

    文件被拆成一个个小的文件,即webpack的文件分割。这里是以页面为单位进行切割。具体实现如下:

    通常情况下,我们引入vue文件的方式是

    import RankList from ‘@/components/RankList’

    然后在router里面配置

    {
          path: '/rank-list',
          name: 'RankList',
          meta: {
            title: '排行榜'
          },
          component: RankList
    }

    按需加载只需要修改vue文件的引入方式:

    const RankList = () => import( /* webpackChunkName: "RankList" */ '@/components/RankList')
    /* webpackChunkName: "RankList" */  是打包后文件名称,后面是文件路径。
    '@/components/RankList'  是文件路径。

    在build目录下找到webpack.prod.conf.js文件,将output修改为
     output: {
        path: config.build.assetsRoot,
        filename: utils.assetsPath('js/[name].[chunkhash].js'),//文件格式,文件名.文件哈希
        chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')//文件切割后的文件名称。这里的name对应的就是路由中引入文件时候的webpackChunkName
    }

    具体可参考官网:https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

  • 相关阅读:
    RPA 产品落地的最后一公里
    H5 native.js 控制wifi
    js 添加css或者链接文件
    js 获取网址中的参数
    js自建readAsBinaryString方法
    js 获取选中文字
    js 身份证校验代码
    js复制对象
    js 字符串编码与解码
    js数组排序
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/10407258.html
Copyright © 2011-2022 走看看