vue webpack打包优化操作技巧
临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题! webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便。 webapck 把所有的静态资源都看做是一个 module,通过 webpack,将这些 module 组成到一个 bundle 中去,从而实现在页面上引入一个 bundle.js,来实现所有静态资源的加载。 话不多说,直接开始正文吧 先给大家看一下项目的目录结构: 就是正常的项目结构,简单说一下吧:
优化思路项目打包时间长,原因无外乎就是项目整体比较庞大、依赖复杂、组件之前拆分不够合理。 对于这三个问题呢,我们可以针对下面这几个方面去做一下处理:
实际操作有了整体的思路,那么开搞就可以啦 去webpack文档去看了一下有一个DllPlugin,这个插件就是帮助我们解决问题的关键,下面是我webpack.dll.config的代码: 我们需要将项目中具有重用性的包抽离出来,放在vendor数组里面,然后在下面output里面定义一下打包输出的文件路径,然后在resolve里面配置解析参数,最后定义使用的DllPlugin插件,UglifyJsPlugin是压缩js的插件 Dllplugin里的path,会输出一个 成功以后,static下会有dll.vendor.js,根目录下会有 ok,到这里,抽离依赖库的事情就完成了,那么接下来问题就是怎么引用呢,怎么在dev和build跑呢? 这里补了一点dll和 继续上面的步骤,我们需要根据生成的json文件去修改webpack.base.config文件: 然后打开index.html,在底部加上 执行一下 升级处理至此优化的问题基本已经解决了,但是在处理过程中需要进行复制粘贴,还要对index.html文件进行操作,如果是对于项目不熟悉的人来进行开发项目的话,就会出现一些小的问题,所以我决定继续往下研究一下: 思路还是上面的思路,我们下面需要进行的操作呢就是对与之前的处理进行优化,通过配置文件,和命令去实现我们想要的效果 首先我们将上面 webpack.dll.config 文件里面的entry配置项拿出来,在config文件夹下新建一个dll.js 这里面其实就是我们一开始写的entry的配置项,根据这个js去打包的文件有一个顺序,就是我总结的这个: 这里的依赖顺序必须是:对象从上往下依赖,数组从右到左依赖(如果互不依赖的可以忽略顺序) 如果不按照这个顺序去写的话,会出现依赖错误的问题!!! 然后在output里面再进行一下配置: 这样在执行 是不是看到文件后面的hash就一脸懵逼,这怎么办,我们没有办法去进行复制粘贴了!!(我们的目的不就是不进行复制粘贴吗 正经脸-_-) 要实现命令操作之后不进行复制粘贴操作就需要使用webpack的HtmlWebpackPlugin插件 在plugins里面配置一下HtmlWebpackPlugin 然后在根目录添加一个index.ejs模版( ), index.ejs中代码如下:
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
|