webpack打包优化的几个方法总结

webpack打包优化的几个方法总结打包优化的几个方法总结

主要介绍了webpack打包优化的几个方法总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具

有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

为什么要优化打包？为什么要优化打包？

项目越做越大，依赖包越来越多，打包文件太大

单页面应用首页白屏时间长，用户体验差

我们的目的我们的目的

减小打包后的文件大小

{

path: '/index',

component: resolve => require.ensure([], () => resolve(require('@/components/index')))

},

{

path: '/about',

component: resolve => require.ensure([], () => resolve(require('@/components/about')))

}

]

1.2 第三方组件和插件。按需加载需引入第三方组件

Vue.component(Button.name, Button)

1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入

// 在main.js引入

import Vue from vue

import Vuelidate from 'vuelidate'

Vue.use(Vuelidate)

// 按组件按需引入

import { Vuelidate } from 'vuelidate'

2、优化、优化 loader 配置配置

优化正则匹配

loader: 'babel-loader?cacheDirectory',

include: [resolve('src')]

}

]

}

3、优化文件路径、优化文件路径——省下搜索文件的时间省下搜索文件的时间

extension 配置之后可以不用在 require 或是 import 的时候加文件扩展名,会依次尝试添加扩展名进行匹配。