文档章节

抽离css以及公共js

莫西摩西
 莫西摩西
发布于 05/20 21:50
字数 696
阅读 8
收藏 0

分离css

  • 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。
  • extract-text-webpack-plugin
    > 1. 假设我们原本页面的静态资源都打包成一个 JS 文件,加载页面时虽然只需要加载一个 JS 文件,但是我们的代码一旦改变了,用户访问新的页面时就需要重新加载一个新的 JS 文件。有些情况下,我们只是单独修改了样式,这样也要重新加载整个应用的 JS 文件,相当不划算。 2. 还有一种情况是我们有多个页面,它们都可以共用一部分样式(这是很常见的,CSS Reset、基础组件样式等基本都是跨页面通用),如果每个页面都单独打包一个 JS 文件,那么每次访问页面都会重复加载原本可以共享的那些 CSS 代码。如果分离开来,第二个页面就有了 CSS 文件的缓存,访问速度自然会加快。虽然对第一个页面来说多了一个请求,但是对随后的页面来说,缓存带来的速度提升相对更加可观。 因此当我们考虑更好地利用缓存来加速静态资源访问时,会尝试把一些公共资源单独分离开来,利用缓存加速,以避免重复的加载。除了公共的 CSS 文件或者图片资源等,当我们的 JS 代码文件过大的时候,也可以用代码文件拆分的办法来进行优化。

抽离公共js资源,

  • webpack4.x的optimization做配置
    module.exports = {
  // ... webpack 配置

  optimization: {
    splitChunks: {
      chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
    },
  },
}
  • 特别指出公共的文件资源,而不让webpack自己去判断哪些是公共资源
// 
    module.exports = {
  entry: {
    vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方类库
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: "vendor",
          name: "vendor", // 使用 vendor 入口作为公共部分
          enforce: true,
        },
      },
    },
  },
  // ... 其他配置
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /react|angluar|lodash/, // 直接使用 test 来做路径匹配
          chunks: "initial",
          name: "vendor",
          enforce: true,
        },
      },
    },
  },
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: path.resolve(__dirname, "node_modules") // 路径在 node_modules 目录下的都作为公共部分
          name: "vendor", // 使用 vendor 入口作为公共部分
          enforce: true,
        },
      },
    },
  },
}

© 著作权归作者所有

上一篇: vue预渲染
下一篇: loader学习小计
莫西摩西
粉丝 8
博文 176
码字总数 72706
作品 0
广州
程序员
私信 提问
记一次 React 项目的优化(webpack4 插件的使用)

这里记录了自己在开发一个 React 项目时使用 Webpack 优化项目的过程,欢迎大家围观点赞或吐槽。 学习 React 时候,写了个个人博客站点。使用 webpack 作为打包工具,在这之前学习 webpack ...

a独家记忆
2018/06/30
0
0
webpack学习(四) -- css tree shaking

css tree shaking 我们和webpack(三)一样,用案例说话 安装css需要的两个loader,css-loader 和style-loader 在项目webpack.config.js配置文件中配置 在html文件中写一些结构 创建css文件,在...

吐泡泡姑娘
03/28
0
0
Vue模板、JS、CSS分离实现

一、需求分析 我们知道,Vue.js文件默认由、、三种标签将HTML、CSS、JS混合到一个文件当中。 相信作者尤大这么设计的作用显而易见,有它一定的优势,即:当单个VUE文件如果样式、逻辑、模板相...

James_Liauw
05/19
0
0
基于webpack4.X从零搭建React脚手架

项目初始化 安装webpack 本次创建是基于webpack4 新建webpack配置文件 在根目录创建build文件夹,添加一个js文件,命名为webpack.base.conf.js 使用merge的方式来组织webpack基础配置和不同环...

temulun
2018/12/23
0
0
vue-cli脚手架打包的静态资源请求出错

vue-cli脚手架打包的静态资源请求出错 问题 vue-cli默认配置打包后部署到特定路径下静态资源路径错误问题。 静态资源打包使用相对路径后css文件引入大图片路径错误问题 使用vue-cli2脚手架生...

筱筱酱
06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

FPGA 设备 USB Platform Cable USB

lsusbFuture Technology Devices International, Ltd FT232H Single HS USB-UART/FIFO IC

MtrS
今天
4
0
lua web快速开发指南(6) - Cache、DB介绍

"数据库"与"缓存"的基本概念 数据库与缓存是服务端开发人员的必学知识点. 数据库 "数据库"是一种信息记录、存取的虚拟标记地点的集合统称. 比如现实生活中, 我们经常会用到文件柜、书桌等等数...

水果糖的小铺子
今天
5
0
Oracle分页查询语句的写法

Oracle分页查询语句的写法 Oracle分页查询语句使我们最常用的语句之一,下面就为您介绍的Oracle分页查询语句的用法,Oracle分页查询语句基本上可以按本文给出的格式来进行套用。   Oracle分...

康师傅
昨天
5
0
java并发图谱

1527
昨天
2
0
Mybatis之拦截器Interceptor

使用mybatis时用PageHelper进行分页,用到了PageInterceptor,借此了解下mybatis的interceptor。Mybatis的版本是3.4.6,MybatisHelper的版本是5.1.3。 1、PageInterceptor 先上一段代码,如下...

克虏伯
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部