1. 懒加载

• SPA 应用中....所以....
• 常见的比如在 vue-router 中使用懒加载

{
      path: '/',
      component: () => import('./views/HomeView'),
},
{
      path: '/login',
      component: () => import('./views/Login'),
},
// 或者
const HomeView = () => import('./views/HomeView')
const Login = () => import('./views/Login')
{
      path: '/',
      component: HomeView,
},
{
      path: '/login',
      component: Login,
},

webpack 按需加载打包优先级/层级：

• 入口文件中使用的组件将打包到公共文件中，优先于任何 chunk 加载

// main.js
// 加载且优先加载一次
import ElementUI from 'element-ui'
Vue.use(ElementUI)

// Login.vue
// 之后加载其他模块且正常使用（mian.js 已安装组件）
<el-card>
...
</el-card>

访问 / 时浏览器会加载 0.1dfesw3131de1.js
访问 /login 时浏览器会加载 1.xawer12312321.js

其文件名结构如下

// build/webpack.prod.conf.js
output: {
    path: config.build.assetsRoot,
    // 对应 entry 里面生成出来的文件
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // 未被列在 entry 且需要被打包出来的文件
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},

即打包之后组件/页面文件名是以 chunkFilename 配置的格式命名的。

魔法注释

• 指定哪几个页面打包在一起，用于两个密切相关的页面一次性加载；
• 指定打包后的 chunkFilename 文件名，便于美观，排查错误等。

在 import 体中添加注释

{
      path: '/singup',
      component: () => import(/* webpackChunkName: "auth" */ './views/Singup'),
},
{
      path: '/login',
      component: () => import(/* webpackChunkName: "auth" */ './views/Login'),
},

在配置文件中指定名称格式

// build/webpack.prod.conf.js
output: {
    ...
    // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
},

之后访问 /login 时浏览器加载 auth.w23423341.js, 访问 /singup 时浏览器无需加载组件信息。

关于是否需要 chunkhash 讨论
浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
这里是浏览器、缓存的问题，使用 chunkhash 即代表模块内容改变会引起文件名改变，浏览器不会从缓存中加载到已改变的文件；否则某些 HTTP Server 配置下将导致浏览器不去加载更新后的文件，部署生效需要依赖 reload 服务器或者客户端手动清除缓存。