今日在做性能优化,有的同事提出在PC端chrome浏览器上使用dev-tools测试时,有个addStylesToDom()函数耗时很长,于是就这部分我进行了资料查询和分析,结果如下:
光就本问题而言,其实对于我们的项目是没有任何影响的,原因是项目最终上维护的是webpack打包出来的静态static文件+index.html,而这个接口所属插件并不会被最终的静态文件使用,只是在PC端Web上开发时才使用到,因为我们需要调试代码,必须要实现热重载功能,否则代码调试需要反复打包,这个时间成本太高。
但是咱需要尽量多了解下这个原理,以及为什么npm run dev和npm run build都能实现热重载,但是build不会实时编译呢。针对项目情况,分析结果如下:
首先来看问题中提到的接口所在的文件,其路径为node_modules\vue-style-loader\lib\addStylesClient.js,他是属于插件vue-style-loader的。
**Vue-style-loader:**
该插件作为vue-loader的依赖项存在。如果代码中需要把.vue文件中的CSS解析为单独的文件,则需要安装此依赖插件,否则在初始化的时候会报错。
1)安装方法:
如果是 常规 的,执行 npm install stylus-loader css-loader style-loader --save-dev 安装依赖就行。
如果是 less 的,执行 npm install less less-loader --save-dev 安装依赖就行。
如果是 sass 的,执行 npm install sass sass-loader --save-dev 安装依赖就行。或者ÿ