Vue打包过程



Vue cli生成的脚手架,默认已经对webpack打包做了最优配置和处理,其中包括:优化Vue构建过程、浏览器缓存管理、代码分离、懒加载等;


缓存管理

打包时,会将业务代码、第三方库等分离成单独的文件;然后会为每一个文件生成一个hash码,并将hash码添加到文件名上。如果文件内容发生了变化,打包时文件名上的hash码就会改变;反之,将不会改变,以此来控件浏览器缓存,增量加载被改动的文件。


懒加载

如下,如果组件的加载方式为路由懒加载 import();在打包时,组件会被打包成一个单独的文件,并在页面需要时进行异步加载;

// import Hello from '@/components/Hello'

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      // component: Hello,
      component: () => import('@/components/Hello')
    }
  ]
})


参考资料:

https://cli.vuejs.org/zh/config/#filenamehashing

https://juejin.im/post/5a337a1f6fb9a0452b4949e0

https://segmentfault.com/a/1190000021768648

举报

© 著作权归作者所有


1