深入浅出webpack之CDN、shimming、MiniCssExtractPlugin

___2
97 阅读2分钟

什么是CDN

  • CDN称之为内容分发网络

    • 它是指通过相互连接的网络系统，利用最靠近用户的服务器
    • 更快，更可靠的将音乐、图片、视频、应用程序及其他文件发送给用户
    • 来提高性能、可扩展性及低成本的网络内容传递给用户

  • 在开发中使用CDN的方式

    • 打包所有的静态资源，放到CDN服务器，用户所有的资源都是通过CDN加载的
    • 一些第三方资源放到CDN服务器上

  • 使用方式一（公司自己购买CDN服务器）

    • 购买CDN服务器

      • 目前阿里、腾讯、亚马逊、Google等都可以购买CDN服务器
      • 我们可以直接修改publicPath，在打包时添加上自己的CDN地址
          module.exports = {
        //...
        output:{
            publicPath:"https://awei.com/cdn/"
        }
    }

      image.png

  • 使用方式（第三方库的CDN服务器）

    • 通常一些比较出名的开源框架和库都会将打包后的资源放到一些比较出名的，免费的CDN服务器上，国际上比较多的是unpkg、JSDelivr、cdnjs,国内比较好的是bootcdn

          module.exports = {
        //...
        // 设置某些库不打包进dist文件夹,这时候运行打包后的代码会报错，需要在index.html手动引入
        externals:{
        // 这里key是库名，value是库暴露出来的全局对象
            lodash: '_',
            dayjs:"dayjs"
        },
    }

      image.png

    • 优化：我们在开发环境中其实使用本地npm包效率是更高的，所以我们这个第三方库CDN只需要在生产环境使用，开发环境使用本地npm

      image.png

      image.png

      • 执行 npm run dev,查看打包后的dist，可见npm库被打包到vendors.js，index.html没有引入CDN
      • 执行 npm run build,查看打包后的dist，可见没有生成vendors.js文件，index.html有引入CDN

认识shimming

  • shimming是一个概念，是某一类功能的统称（不推荐使用）

    • shimming翻译过来我们称之为 垫片，相当于给我们的代码填充一些垫片来处理一些问题
    • 比如我们现在依赖一个第三方的库，这个第三的库本身依赖lodash，但是默认没有对lodash进行导入(认为全局存在lodash)，那么我们就可以通过PovidePlugin来实现shimming的效果

  • 注意:webpack并不推荐随意的使用shimming

    • Webpack背后的整个理念是使前端开发更加模块化
    • 也就是说，需要编写具有封闭性的、不存在隐含依赖(比如全局变量)的彼此隔离的模块

  • 使用示例

    • npm i axios -S

      image.png

      image.png

MiniCssExtractPlugin

  • 可以帮助我们将css抽取到一个独立的css文件中，该插件需要在webpack4+才能使用

    • npm i mini-css-extract-plugin -D

    image.png

示例代码

    https://gitee.com/weiLZ598/webpack-study.git
avatar
文章
阅读
粉丝