|
webpack是react项目标配的打包工具，和NPM搭配起来使用管理模块实在非常方便。这篇文章主要介绍了webpack打包优化（VUE Project）,需要的朋友可以参考下
临近春节，公司很多同事都提前回家过年，剩余人员根据禅道去修改bug，当bug修正完毕以后，我们需要重新打包给运维，上测试服给测试同事提测，但是由于项目本体比较庞大，所以打包时间太过漫长（二十五分钟以上:sob:），所以有了打包优化的想法（其实想法早就有了，但是因为平时工作计划比较充实，所以一直没有去完成这个工作），这次正好有时间，所以去重新考虑了这个问题！
webpack是react项目标配的打包工具，和NPM搭配起来使用管理模块实在非常方便。
webapck 把所有的静态资源都看做是一个 module，通过 webpack，将这些 module 组成到一个 bundle 中去，从而实现在页面上引入一个 bundle.js，来实现所有静态资源的加载。
话不多说，直接开始正文吧
先给大家看一下项目的目录结构：
就是正常的项目结构，简单说一下吧：
- build文件夹包含的是一些打包配置的一下东西
- config文件夹是项目的基础配置
- dist是打包之后的文件
- node_modules是项目的依赖包
- src文件夹里面是项目的源码
- static文件夹里面放的是一些项目使用的静态资源
- index.html是项目的首页
- package.json文件是项目的配置json
- yarn.lock是使用yarn锁定项目用的依赖
优化思路
项目打包时间长，原因无外乎就是项目整体比较庞大、依赖复杂、组件之前拆分不够合理。
对于这三个问题呢，我们可以针对下面这几个方面去做一下处理：
- 对项目进行路由屏蔽，只打包自己需要打包的部分（我司就是好几个项目合并在了一起，至于原因则是 需求类似，所以放在一起比较省事 -_-
| 
发表于 2018-2-22 08:33:15
