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

  • 相关阅读:
    thinkphp5ajax分頁&&搜索後分頁
    yii框架多文件上傳
    Redis:Linux安装与使用
    JSP使用Struts2标签库报错
    Dubbo:3
    Dubbo:1
    Dubbo:2
    zookeeper:master选举
    zookeeper:分布式锁简单实现(JavaApi)
    zookeeper:Curator操作节点
  • 原文地址:https://www.cnblogs.com/hutuzhu/p/10407258.html
Copyright © 2011-2022 走看看