项目性能优化问题
老师您好！看了本章之后，有以下疑惑
问题描述：
1.文章中提到的，对代码进行分割的处理，或者是路由懒加载，服务器设置gzip这些策略，只是在访问应用时，节省流量提高性能。这个对于webpack本身的打包效率是没有啥作用的吧？
2.我现在负责一个erp的项目，包括一些表单编辑，流程编辑器，第三方模块及项目本身的业务代码文件很多。我打包整个应用需要花费2-3分钟的时间，特别特别的慢。
我用webpack-bundle-analyzer分析打包后的文件，发现parsed这个选项下，总体积有6M这么大。
因为业务需要，element-ui就是全量引入有1M多，此外还有一些比较大的第三方库，有500kb也有700kb的包。用webpack-spead-measure这个插件后，发现vue-loader,eslint-loader和sass-loader耗时有40+s。
2.1针对于上面打包体积的做法，我看网上的做法，都会用externals这个选项把基本不会变更的包通过外链进行加载，例如vue,vue-router,vuex这些，从而不对这些模块打包，从而减少打包的体积缩短打包时间。（PS:这种做法其实对于网页的性能是没有任何优化的吧？单纯的减少了webpack的打包的体积），不知道老师是不是也是这样做的？
2.2另外，关于vue-loader耗时长的问题，这个主要是什么原因造成呢？我看了一些业务组件的体积也是挺大的，是不是需要找到对应的组件一个个排查问题？是不是主要看有没有无用的代码块？排查的方向又是什么呢？
2.3 dll-plugin这个插件是不是只适用于开发环境，生产环境不要使用？
3.我的路由信息是通过后台返回的，在使用路由懒加载的时，引入的文件是拼接的，我怎么做到可以动态设置前面的chunkName(xxx)，
```js
import(/* webpackChunkName xxx */ @拼接的信息)
```
比如说，返回了两条信息，一个是user另一个是edior，期望就达到下面的效果
```js
import(/* webpackChunkName user */ @/.../user)
import(/* webpackChunkName editor */ @/.../editor)
```
麻烦老师解答了，谢谢！！
正在回答
同学你好
很好的一系列问题
1 我们这一周讲的是打包后的文件怎样优化 并没有涉及webpack 打包速度的问题。
2.1 使用 extends 主要是讲一些常用的第三方库采用 cdn 的方式进行加载 和我们的将一些常用的第三方库分离出来的思路其实是一样的
2.2 针对 webpack 编译加速的问题，可以选用一些插件来进行编译加速 比如 https://webpack.docschina.org/loaders/thread-loader/ 启动一个 worker pool，还有一个 happypack 完成的是相同的任务 https://github.com/amireh/happypack，这一块内容 我打算在之后使用加餐的形式来给大家提供更详细的一个配置和讲解
2.3 dll plugin 也是提升编译速度的 所以和 2.2 是一个作用
3 没有特别理解你的意思 能否再解释一下呢？
-
rookie_white #1
老师您好！
1.关于magic comment是这样的，比如我现在在项目中是这样指定了每个路由对应的webpackChunkName的
但是，如果路由的一系列配置项都是后台返回的,我怎么做到动态的去修改这个魔法注释里的ChunkName呢？
正常的思路就是循环遍历这个配置列表生成路由配置信息。const list = ['ad', 'user', 'editor']
for (let i = 0; i < length; i++){
let item = list[i]
route = {
...,
component: import(/* webpackChunkName item*/ '../components/' + item)
}
}就是那个webpackChunkName 的名字 怎么根据list数组中的每一项去指定呢？
2.关于thread-loader，我的项目就是基于vue-cli3.x的，默认的生产环境配置就应用了thread-loader，对应的options默认配置感觉没啥问题，关于这个loader的话，有什么最佳实践吗？
3.DllPlugin这个插件，是不是只适用于开发环境中使用，生产环境不使用？
这个插件是需要另外建立一个动态链接库的，这只需要对于动态链接进行一次编译，剩下的构建都会从这个动态链接库里取，不需要再重新编译，动态链接库里有的模块，所以编译速度会提升。这个对于开发环境来说是很好，但对于生产环境而言，我直接npm run build，只生成我所需要的打包后的文件代码，其实没有必要使用这个插件的吧？
不知道我表达清楚了没。。
4. 还有个问题，请问老师，我们在执行npm run dev的时候，比如给cache-loader，thread-loader，vue-loader设置了缓存选项之后，在node_modules下会有.cache的文件夹缓存了相应的文件，然后我们每次热更新或者重新 npm run dev的时候也会从.cache去获取没有发生变化的文件内容。 但是我们在npm run build的时候，还会从.cache文件里取文件内容来进行打包吗？还是直接打包的内容就是从入口文件起所依赖的所有模块的最新内容呢？
5. 关于externals选项或者是代码分割splitChunk是不是可以理解为都是为了节省流量而存在的？如果是的话，之所以不用externals完全替代splitChunks的原因是因为externals只能通过全量引入的方式，那么对于一些第三方且用到方法不多的库，就显得得不偿失了。
6.今天测了一下项目，如果将devtool设置为none的话，npm run build的构建速度是一分10s左右，体积为6M，gizped压缩后是1M-2M的范围，请问老师，这样的指标，对于一个项目而言是可接受的吗？因为我不知道该怎么判断这个基准。。。我总感觉还可以更快，有点强迫症
麻烦老师了，谢谢！2021-06-10 01:04:21 -
第一个问题 可以使用 webpackchunkname 的魔法注释里面的变量特性，比如
//使用[request]来告诉webpack，这里的值是根据后面传入的字符串来决定，本例中就是变量pathName的值，具体如下：
import(/* webpackChunkName: "[request]" */`../containers/${pathName}`)2 这个默认配置就足够了，没必要再特别魔改，具体设置可以参照文档。
3 DllPlugin 就是加速 webpack 编译速度的，只在开发环境使用就好了。
4 vue inspect 以后去看 cache loader 的选项，并没有针对生成和开发的区别，两者都用了。
5 externals 是针对第三方不怎么变的文件 充分利用缓存 以及 http2 并行加载多个文件的能力。第四章有这个问题的解释，可以在看一看。
6 我认为在现在这种速度的情况下 1m-2m 是可以接受的，可以根据这一周的内容根据里面的点，再看看是否还有能够提高的点。
2021-06-11 10:30:06
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星