-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
基于vue-cli的webpack优化配置之路 #2
Comments
externals 提取和 使用 dllplugin 冲突吗 |
+1,如果使用了externals在index.html使用了cdn引入。dllplugin中又提取了不需要更新的依赖包,放在index.html中。如果都有element-ui,那是否就加载了两次? @linzx1993 |
@kerwin1 先回答问题:如果你在externals设置了 |
@InvincibleJun 不好意思啊,我才意识到我把这个文章的issue给关掉了,没有注意到你的回复。 |
项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的。关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack。
项目位置链接
仔细总结了一下,自己的优化基本还是网上流传的那几点
不过经过自己的实践最后三点是对自己项目优化最大的。文章也主要对后面几点详细说明一下
原来打包一个项目所需要的时间基本在40秒左右,那再经过后面三步优化大概要多久呢
1.使用dllplugin预编译与引用
首先为什么要引用Dll?在网上浏览了一些文章后,我发现上除了加快构建速度以外,使用webpack的dll还有一个好处。
Dll打包以后是独立存在的,只要其包含的库没有增减、升级,hash也不会变化,因此线上的dll代码不需要随着版本发布频繁更新。 因为使用Dll打包的基本上都是独立库文件,这类文件有一个特性就是变化不大。当我们正常打包这些库文件到一个app.js里的时候,由于其他业务文件的改变,影响了缓存对构建的优化,导致每次都要重新去npm包里寻找相关文件。而使用了DLL之后,只要包含的库没有升级, 增减,就不需要重新打包。这样也提高了构建速度。
那么如何使用Dll去优化项目呢
首先要建立一个dll的配置文件,引入项目所需要的第三方库。这类库的特点是不需要随着版本发布频繁更新,长期稳定。
基本配置参数和webpack基本一模一样,相信来看优化的都明白什么意思,我就不解释了。然后执行代码编译文件。(我的配置文件是放在build里面,下方路径根据项目路径需要变动)
当运行完执行后,会生成两个新文件在目录同级,一个是生成在dist文件夹下的verdor.js,里面是刚刚入口依赖被压缩后的代码;一个是dll文件夹下的verdor-manifest.json,将每个库进行了编号索引,并且使用的是id而不是name。
接下去你只要去你的webpack配置文件的里的plugin中添加一行代码就ok了。
这时候再执行webpack命令,可以发现时间直接从40秒锐减到了20s左右,整整快了一倍有木有(不知道是不是因为自己依赖库太多了才这样的,手动捂脸)。
2.happypack多线程编译
一般node.js是单线程执行编译,而happypack则是启动node的多线程进行构建,大大提高了构建速度。使用方法也比较简单。以我项目为例,在插件中new一个新的happypack进程出来,然后再使用使用loader的地方替换成对应的id
这时候再去执行编译webpack的代码,打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大,不知道是不是因为本身js比重占据太大的缘故)。
3.善用alias
本来是没有第三点的,只不过在搜索网上webpack优化相关文章的时候,看到用人提到把引入文件改成库提供的文件(原话怎么说忘记了,就是有些库会直接提供编译好的文件给你引用,你可以直接把路径改成提供的路径。还是看例子吧,手动捂脸)。
vue-cli配置文件中提示也有提到这一点,就是下面这段代码
然后我将其他所有地方关于vue的引用都替换成了vue$之后,比如
时间竟然到了12s,也是把我吓了一跳。。。
然后我就把jquery,axios,vuex等等全部给替换掉了。。。大概优化到了9s左右,美滋滋,O(∩_∩)O~~
4.webpack3升级
本来是没第四点,刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点,比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件
不过在添加这行代码之后,构建时间并没有太大变化,不过运行效率没试过,不知道新的效果怎么样
好了基本上感觉就是以上这些效果对项目的优化最大,虽然没有到网上说的那种只要3~4秒时间那么变态,不过感觉基本8,9秒的时间也可以了。
The text was updated successfully, but these errors were encountered: