vue3.0 + typescript + webpack-bundle-analyzer实现代码分析和CDN

站长

2022年12月09日 03:22 · 阅读数 50

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

背景

我们用vue-cli来开发项目的时候经常会引用，很多插件，比如：elementUI、vue-router、vuex、echrats...等等，但是在我们不知不觉，日积月累下我们的包就越来越多，这样会导致我们的页面加载越来越慢。这里推荐安装使用最新的webpack-bundle-analyzer—— Webpack 插件和 vue-CLI 实用程序，它可以将打包后的内容束展示为方便交互的直观树状图，让你明白你所构建包中真正引入的内容；我们可以借助它，发现项目大体有哪些模块组成，找到不合时宜的存在，然后优化它。

工具

webpack-bundle-analyzer

npmjs: www.npmjs.com/package/web…

github: github.com/webpack-con…

vue-cli

vue3.0 + typescript + webpack-bundle-analyzer实现代码分析和CDN

案例

我们现在有一个项目vue-demo,项目里有vue、vue-router、vuex,这三个库，我们可以用webpack-bundle-analyzer查看各个包的大小：chunk-vendors.js大约是150KB,index.js大约是6.6KB。 vue3.0 + typescript + webpack-bundle-analyzer实现代码分析和CDN

vue3.0 + typescript + webpack-bundle-analyzer实现代码分析和CDN

实现

安装webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

vue.config.js修改

chainWebpack: (config) => {
    if (process.env.use_analyzer) {
      config
        .plugin("webpack-bundle-analyzer")
        .use(require("webpack-bundle-analyzer").BundleAnalyzerPlugin);
    }
    return config;
  },

2.package.json修改

"analyz": "cross-env use_analyzer=true npm run build"

3.执行

npm run analyz

通过上面的三步我们打开本地的http://localhost:8888/就可以看到项目中各个库的依赖和大小了！

CDN优化

1.vue.config.js修改

把不需要打包的资源进行相应的配置，如下所示：

configureWebpack: {
    externals: {
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
    },
    plugins: [],
  },

把要cdn的链接放入我们的入口配置里，如下所示：

pages: {
  index: {
    entry: "src/main.ts",
    template: "public/index.html",
    filename: "index.html",
    title: "vue-demo",
    chunks: ["chunk-vendors", "chunk-common", "index"],
    cdn: {
      css: [],
      js: [
        "https://cdn.jsdelivr.net/npm/vue@next",
        "https://cdn.jsdelivr.net/npm/vue-router@4.0.0/dist/vue-router.global.min.js",
        "https://cdn.jsdelivr.net/npm/vuex@4.0.0/dist/vuex.global.min.js",
      ],
    },
  },
},

2.public\index.html修改

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
</body>

</html>

渲染要引入的CDN的css链接

 <% for (let i in htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
    <% } %>

渲染要引入的CDN的js链接

 <% for (let i in htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

3.执行

npm run build

我们可以看到我们的js文件变小了，chunk-vendors由原来的150KB变到现在的50KB。

vue3.0 + typescript + webpack-bundle-analyzer实现代码分析和CDN

思考

webpack 有三个概念：module，chunk，bundle，即输入，中间态，输出。我们以上的操作都是针对bundle的，也就是对输出进行的分析和优化。webpack-bundle-analyzer 作为可视化的 webpack 打包后文件的分析插件，是比较成熟的方案。

webpack-bundle-analyzer作用:

认识打包后的文件和大小；
以便优化打包后的文件。

CDN优化:

引用CDN上的资源一方面可以减轻自己服务器的带宽消耗（资源从别的服务器下载，而不是你自己的服务器。
CDN上的资源一般是你不会轻易修改的，而且浏览器访问之后还会缓存下来，用户再次访问就无需二次下载资源，网站后续的整体访问速度就更快了，同时CDN还可以做加速。

webpack-bundle-analyzer Options(参数解读)

analyzerMode: 默认值：server. 在server模式分析器将启动 HTTP 服务器以显示捆绑报告。在static模式下，将生成带有捆绑报告的单个 HTML 文件。
analyzerHost 默认值：127.0.0.1. 将在server模式下用于启动 HTTP 服务器的主机。
analyzerPort 默认值：8888. 将在server模式下用于启动 HTTP 服务器的端口。
reportFilename 默认值：report.html. 将在static模式下生成的捆绑报告文件的路径。

pages Options(参数解读)

entry:

page 的入口文件

template:

 模板来源

filename:

在 dist/index.html 的输出

title:

 当使用 title 选项时，
template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>

chunks:

在这个页面中包含的块，默认情况下会包含
提取出来的通用 chunk 和 vendor chunk。

cdn:

自定义的cdn对象，存放cdn js和css的链接地址

往期文章

转载自:https://juejin.cn/post/7055082226655952903