vue编译(vue编译打包)

茫然知了 • 2023-09-23 13:13 • 生活指南 • 阅读 77

vue编译打包速度优化

1、首先颂简在config文件夹下配置webpack.dll.config.js(内容如下)，要打包的模块的数组可以将神轿一些较大的依赖放进vendor中

2、在package.json的scripts加上

3、运行npm run dll就可以游樱肆生成vendor-manifest.json和vendor.dll.js

4、然后在index.html中引入vendor.dll.js

然后就可以正常的进行编译打包，会发现将更多的依赖放到vendor，打包速度越快

优化前

优化后

大概平均可以节省三分之一的时间。参考 webpack中文网

需求：动态获取一段字符串类型的js脚本，动态编译它并且可以敏丛完美在vue中运行与之交互。

实现：动态编译js的方式有饥橘eval和new function

简单例子：

eval：

new function:

显然后者更利于扩展，详细了解区别可以参考链接内容：烂拿团

要注意使用new Function，在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同：

首先找到我们的vue项目文件夹下打开终端

输入我们的第一个命令

npm run build

编译完成后全局全装server

npm install -g serve

安装完成后运行一下编译后的项目

serve dist

然后给拍渣了我们一个地址打开就是编译后的项目

然后我们的项目多了一个文件夹dist里面有一个闷盯index.html文件就是我们编译后的蚂贺和文件

自我理解的作用：解析转换.vue文件。提取出script，css，template，再分别交给对应的loader去处理。核心就是提取。

官方定义：

1、允许为vue组件的每个部分使用他的webpack loader，例如在style中使用sass，在template中使用Pug

2、允许一个.vue文件中使用自定义块，并对其运用自定义的loader链

3、使用webpack loader将style，template中引用的资源当作模块依赖处理

4、为每个组件模拟出scoped css

5、在开发过程中使用热重载来保持状态

以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！

版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。