webpack优化项目
2024-09-08 18:23:00
在使用vue 构建项目的时候 ,会用到vue.js, vue-router.js, 等库,通常打包的话会将这些公用的代码打包的一个文件中,导致该文件过大影响加载的速度。那么可以考虑使用cdn 加速的方式将这些文件单独加载,在webpack4 中,配置比如
externals : {
'vue': 'Vue'
},
可以将该文件排除在打包文件之外。
在单页面应用中 可以通过
<link rel="preload" as="script" href="home.31132ae6680e598f8879.js">
设置 ref 为 preload或者 prefeach
When preloading files, the plugin will use differentas
attribute depends on the type of each file. For each file ends with.css
, the plugin will preload it withas=style
, for each file ends with.woff2
, the plugin will preload it withas=font
, while for all other files,as=script
will be used.
This module requires Webpack 2.2.0 and above. It also requires that you're using html-webpack-plugin in your Webpack project. 使用的时候必须和 html-webpack-plugin插件
一块使用,在webpack4 中 我使用的是
@vue/preload-webpack-plugin 插件,参考的是 vue-cli3 中的依赖 使用preload-webpack-plugin应为版本的问题 打包的时候会报错。使用例子
new PreloadWebpackPlugin({
rel: 'prefetch',
includeHtmlNames: ['index.html'],
include: 'asyncChunks' // or 'initial'
}),
new PreloadWebpackPlugin({
rel: 'preload',
includeHtmlNames: ['index.html'],
include: {
type: 'initial',
entries: ['app','common']
},
}),
new PreloadWebpackPlugin({
rel: 'prefetch',
includeHtmlNames: ['work.html'],
include: 'asyncChunks' // or 'initial'
}),
new PreloadWebpackPlugin({
rel: 'preload',
includeHtmlNames: ['work.html'],
include: {
type: 'initial',
entries: ['work','common']
},
}),
一定要放在 html-webpack-plugin 后面
最新文章
- 关于Raid0,Raid1,Raid5,Raid10的总结
- Nancy之Pipelines三兄弟(Before After OnError)
- IE浏览器不能访问网页,google可以访问
- mac10.12的Cocopods安装使用
- 【转】Xcode7.1环境下上架iOS App到AppStore 流程 (Part 二)
- JAVA 类加载器 第14节
- java.lang.NoClassDefFoundError: org.ksoap2.transport.HttpTransportSE异常处理
- mongo2csv
- 干货!微信自动跳转默认浏览器下载app的方法!
- 我为什么要写 blog?
- Intervals POJ - 3680 (MCMF)
- LINUX介绍
- 使用JavaConfig和注解方式实现零xml配置的Spring MVC项目
- django知识点回顾(上)
- 使用Docker Compose部署基于Sentinel的高可用Redis集群
- win10 损坏 bios?
- C#调用外部DLL介绍及使用详解
- 带分数dfs+剪枝优化
- struts2标签类别
- leetcode231 2的幂 leetcode342 4的幂 leetcode326 3的幂
热门文章
- 手撸Router,还要啥Router框架?react-router/vue-router躺一边去
- KFS邮件自动告警-数据比对-数据修复配置方法
- Python图像处理丨带你认识图像量化处理及局部马赛克特效
- Windows LDAP加固之LDAP over SSL和通道绑定
- vCenter 升级错误 VCSServiceManager 1603
- 【疑难杂症】关于用pydotplus生成iris.pdf报错问题
- KubePi主界面添加镜像仓库并授权给集群,供创建Deployment时选择镜像使用
- Prometheus 监控外部 Kubernetes 集群
- MySQL8.0报错:Access denied; you need (at least one of) the SYSTEM_USER privilege(s) for this operation
- logstash安装插件修改使用的gem源