首页
学习
活动
专区
工具
TVP
发布

按需加载js和css

博客上有一个用mediaelement-and-player.js弄的播放器,插件默认的是每个页面都加载一次mediaelement-and-player.min.js和mediaelementplayer.min.css...首先往后端的方向去想,由于不知道typecho的js是怎么管理的,似乎在插件的激活方法中就开始往模板输出js和css了,我要的是在分析文章的过程中决定要不要输出那个js,所以要从后端来着手去搞的话难度很大...基本思路:header部分声明一个默认为false的变量,当网页中有播放器时候把它赋值为true,底部根据这个变量的值来决定是否输出播放器的js和css。...javascript" src="http://blog.izgq.net/usr/plugins/Html5AudioPlayer/assets/mediaelement-and-player.min.js...这样那些用不上的js就不会加载啦,网页加载速度也会快不少。 不知道css放在页面底部会不会有什么副作用,目前还没遇到什么问题,望大神指点迷津。 不过我觉得这种方式应该是最愚蠢的╮(╯▽╰)╭

2.7K20
您找到你想要的搜索结果了吗?
是的
没有找到

总结几个 webpack 打包优化的方法,前端项目必备

为什么要优化打包?...项目越做越大,依赖包越来越多,打包文件太大 单页面应用首页白屏时间长,用户体验差 我们的目的 减小打包后的文件大小 首页按需引入文件 优化 webpack 打包时间 优化方式 1、 按需加载 1.1 路由组件按需加载...) 1.3 对于一些插件,如果只是在个别组件中用的到,也可以不要在 main.js 里面引入,而是在组件中按需引入 // 在main.js引入 import Vue from vue import Vuelidate..., '@': resolve('src'), } }, 4、生产环境关闭 sourceMap sourceMap 本质上是一种映射关系,打包出来的 js 文件中的代码可以映射到代码文件的具体位置...src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"> <script src="https://<em>cdn</em>.bootcss.com

1.4K10

浅谈低代码平台远程组件加载方案

:组件代码打包为 umd 格式,打包时配置 Webpack externals, 使打包产物不包含公共的依赖; 上传:打包的组件 js 上传到 cdn; 加载:在需要使用组件时,插入一个 script...步骤 打包:组件代码打包为 umd 或 amd 格式,打包时配置 Webpack externals,使打包产物不包含公共的依赖; 上传:打包的组件 js 上传到 cdn; 加载&注册:在需要使用组件时...js 上传到 cdn; 加载&注册:在需要使用组件时,用 esm 的动态引入获取组件,并进行注册; 组件打包 这里需要注意的是,externals 配置项中直接把公共依赖配置为 cdn 地址; import...lodash.js' } }; 使用上述配置打包后产物,中会把 'vue' 替换为 externals 中的 cdn 地址 // 输入 import Vue from 'vue'; // 输出结果...方案二 、方案三 都能实现真正的按需加载,其中 require.js 虽然听上去已经是上个世纪的东西了,但是兼容性和坑相对比较少。

1.4K30

浅谈低代码平台远程组件加载方案

:组件代码打包为 umd 格式,打包时配置 webpack externals, 使打包产物不包含公共的依赖; 2.上传:打包的组件 js 上传到 cdn; 3.加载:在需要使用组件时,插入一个 script...步骤 1.打包:组件代码打包为 umd 或 amd 格式,打包时配置 webpack externals,使打包产物不包含公共的依赖; 2.上传:打包的组件 js 上传到 cdn; 3.加载&注册:在需要使用组件时...js 上传到 cdn; 3.加载&注册:在需要使用组件时,用 esm 的动态引入获取组件,并进行注册; 组件打包 这里需要注意的是,externals 配置项中直接把公共依赖配置为 cdn 地址; import...lodash.js' } }; 使用上述配置打包后产物,中会把 'vue' 替换为 externals 中的 cdn 地址 // 输入 import Vue from 'vue'; // 输出结果...方案二 、方案三 都能实现真正的按需加载,其中 require.js 虽然听上去已经是上个世纪的东西了,但是兼容性和坑相对比较少。

2.1K40

Webpack的异步加载原理及分包策略(深度好文,建议收藏)

= B 此时,我们对项目进行 npm run build, 打包出来的只有两个文件 index.html index.js 由此可见,此时 webpack 把 main.js 依赖的两个文件都同时打包到同一个.../A.js'),把 A.js 分割出去,形成一个 webpack 打包的单独 js 文件。...import() 按需加载 webpack4 官方文档提供了模块按需切割加载,配合 es6 的按需加载 import() 方法,可以做到减少首页包体积,加快首页的请求速度,只有其他模块,只有当需要的时候才会加载对应...打包出来的 js 文件 ? well done !...这时基本没有打包出大文件了,首页加载需要的 vendor.js 也只有几十 kb,而且我们还可以进一步优化,就是把 vue 全家桶的一些模块再通过 cdn 的方法引入,比如 vue-router,vuex

3.9K31

Node.js JXcore 打包

Node.js 是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。...JXcore 是一个支持多线程的 Node.js 发行版本,基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 这篇文章主要是要向大家介绍 JXcore 的打包功能。...root root 4096 Mar 21 06:10 scripts drwxr-xr-x 2 root root 4096 Feb 15 11:56 style 接下来我们使用 jx 命令打包以上项目...,并指定 index.js 为 Node.js 项目的主文件: $ jx package index.js index 以上命令执行成功,会生成以下两个文件: index.jxp 这是一个中间件文件,包含了需要编译的完整项目信息...---- 载入 JX 文件 Node.js 的项目运行: $ node index.js command_line_arguments 使用 JXcore 编译后,我们可以使用以下命令来执行生成的 jx

1.1K10

前端性能优化——包体积压缩82%、打包速度提升65%

externalsTime.png 使用 externals 后,包体积压缩50%、打包速度提升26% 2、组件库的按需引入 为什么没有使用 externals 的方式处理组件库呢?...externals缺点:直接在html内引入的,失去了按需引入的功能,只能引入组件库完整的js和css 组件库按需引入的原理:最终只引入指定组件和对应的样式 elementUI 需要借助 babel-plugin-component...组件库按需引入后,包体积压缩72%、打包速度提升40% 同时 chunk-vendors.css 的体积也有了明显的减少,从206KB降到了82KB 原始体积: originalCss.png 按需引入后...多线程打包 由于运行在 Node.js 之上的 webpack 是单线程模型的,我们需要 webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力 HappyPack 就能实现多线程打包,...区别是 DllPlugin 是将依赖单独打包,这样以后每次只构建业务代码,而 externals 是将依赖转化为 CDN 的方式引入 当公司没有很好的 CDN 资源或不支持 CDN 时,就可以考虑使用

1.4K30

【Vite】1934- Vite打包性能优化以及填坑

将文件分门别类,js,css这些资源目录分别打包到对应的文件夹下 js 复制代码build: { rollupOptions: { output: { chunkFileNames...' js 复制代码plugins: [ visualizer({open: true}) ] arduino 复制代码npm run build // 打包结束后会出现下图 从体积能看到,这里已经达到了.../vue@3.2.37">' } } }) ] 按需导入 仔细看上面那张图右下部分的模块,不知道你会不会感觉到奇怪,明明是同一个包,为什么既出现了...其实lodash-es 是 lodash 的 es modules 版本 ,是着具备 ES6 模块化的版本,体积小,而lodash是common.js版本。lodash最大的缺陷就是无法按需导入。.../cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js">' } } }), viteImagemin

45010

浅入webpack4 高效简单的配置

总体优化这几个方面: 提升生产打包的构建速度 拆分每个 npm 包 将稳定的第三方库(体积比较大的)改用cdn引入,不进行打包 安装可视化打包分析器(可选) 1.提升生产打包的构建速度 首先,你要知道运行在...2.拆分每个 npm 包 当我们运行项目并且打包的时候,会发现chunk-vendors.js这个文件非常大,那是因为webpack将所有的依赖全都压缩到了这个文件里面,这时我们可以将其拆分,将所有的依赖都打包成单独的.../vue/2.6.10/vue.runtime.min.js"> <script src="https://<em>cdn</em>.bootcss.com...但是这种方式也有缺点,在项目加载的时候<em>cdn</em>依赖网络。不论是<em>cdn</em>还是<em>打包</em>在项目中,在首屏加载时候都一样会加载,只是第三方库在不在包里的区别。

90720

Auto.js脚本程序打包

保证电脑和手机(或模拟器)的网络可以正常相连 这里所说的相连是指处于同一个局域网的环境下,有问题请看上一篇Auto.js脚本开发环境搭建。 2....打包应用程序 在保存到手机上面的文件右侧打开下拉菜单,选择"更多"。  选择"打包应用“。  ...把上面的文件复制到电脑上进行编辑,加入隐藏日志的代码,再打包的应用程序在打开后就不会出现日志文件了。 5. Auto.js Pro版本打包有什么不同?...Auto.js Pro版本在打包上做了一些优化,主要区别如下: 1. 没有安装打包插件,也可以正常的打包; 2. 新增如下配置选项,可酌情进行选择; 3....用Auto.js Pro版本的无法打包Auto.js 4.1.1版本的,即使打包出来也无法正常使用;

3.4K40
领券