webpack 会把所有的 JS 文件都打包成一个 JS 文件, 影响页面加载速度.
(1)router/index.JS 中配置懒加载的路由地址:
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
(2) 脚手架默认采用 babel 翻译 JS 代码, 需要安装 babel 的一个插件:
NPM i -save @babel/plugin-syntax-dynamic-import
此时 NPM run build 编译完成的结果中可以看到以要懒加载的组件命名的独立 JS 文件
此时独立的. JS 文件还是会在后台自动加载, 即使不会访问的页面也会下载下来.
(3) 配置 webpack 配置文件 (vue/cli 3.0 版本的新的 webpack 配置文件)
在整个项目的根目录下新建 vue.config.JS 文件, 内容如下:
- module.exports={
- chainWebpack:config=>{
- config.plugins.delete("prefetch")
- }
- }
- //prefetch 意思是, 一旦网络空闲, 就自动下载独立. JS 文件
此时页面的 head 中就看不到 < link href="/js/about.js" rel="prefetch"> 了
来源: http://www.bubuko.com/infodetail-3462101.html