Webpack 4.X 配置cdn加载资源

最新推荐文章于 2024-09-29 17:43:11 发布

前端小小白zyw

最新推荐文章于 2024-09-29 17:43:11 发布

阅读量2.9k

点赞数

分类专栏： Javascript Webpack 文章标签： webpack javascript cdn

本文链接：https://blog.csdn.net/Vue2018/article/details/106474524

版权

Javascript 同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

Webpack

11 篇文章 0 订阅

订阅专栏

众所周知，SPA单页应用，首次访问需要加载近全部资源，从而导致首页渲染速度很慢。

继而，出现很多性能优化方案：图片/资源懒加载、减少http请求、减小请求资源大小，减少dom操作避免触发回流重绘，gzip压缩，cdn加载等等

今天，我们就具体介绍 cdn加载：

我们使用webpack 4.X打包配置cdn加载

在配置前，我们讲一个属性：externals

按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD、ES6等方式进行使用，那就可以通过配置externals

我们项目开发中可以使用 externals的方式，将这些不需要打包的资源从构建逻辑中剔除出去，而使用 cdn的方式引用它们

因为浏览器是多进程，多线程，http请求又是独立线程，可以并发加载资源

接下来，我们根据需求配置webpack.config.js

安装：

npm i html-webpack-plugin -D // 打包生成html

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development', // 模式，可选为 development 和 production 默认为produciton
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'js/build.js', // 出口路径
    publicPath: './', // 公共路径
    path: path.resolve(__dirname, 'dist') // 出口目录
  },
  module: {
  	rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            include: path.join(__dirname, 'src'),
            exclude: '/node_modules/', // 排除node_modules，第三方代码已经处理，不需要二次处理
            presets: ['@babel/preset-env']
          }
        },
      },
  	]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack 4.X', // 文件标题
      filename: 'index.html', // 文件名
      template: path.resolve(__dirname, 'index.html'), // 依赖模板
      inject: true, // js放置位置： true -- body 底部 | head -- head标签 | false -- 不加载js
      hash: true, // 添加hash
      minify: {
        collapseWhitespace: true, // 移除空格
        removeAttributeQuotes: true, // 移除引号
        removeComments: true // 移除注释
      },
      cdn: {
        js: [
          'https://cdn.bootcss.com/axios/0.18.0/axios.min.js', // 配置cdn资源
        ]
      }
    }),
  ],
  externals: {
    axios: 'axios' // 这里以axios库为示例
  },
}

这里webpack基本上配置完成

// src/index.js
import axios from 'axios'
console.log(axios)

// index.html 模板
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--ejs模板语法 引入title-->
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<section id="root"></section>
  <!--ejs模板语法 cdn加载-->
  <% for (let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>
</html>