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