美文网首页
webpack 优化

webpack 优化

作者: lessonSam | 来源:发表于2021-03-24 14:41 被阅读0次

实际开发当中我们的一些包会导致 打包体积过大 比如引入jQuery 等等
解决方案
1 cdn 引入 在模板当中使用 link 引入 (不建议这样)
2.同时link cdn 引入 借助webpack externals externals: {jquery: 'jQuery' } (推荐)

好处 单独使用 link 之后 还可以使用 import 引入 自定义 属性

3/利用 webpack.ProvidePlugin 可以全局使用

    new webpack.ProvidePlugin({
     $: 'jquery',
     $$: 'jquery'
     "全局使用的名字 ": '下载的包名,或者是link 引入的'
这样的配置可以让我们在项目中 不用再写  import xx from  'xx'  直接使用对应的变量即可   
   })
  1. 自动查找后缀
  resolve: {
    // 利用这个 引入 内容 可以不添加 后缀 在这里配置就可以
    extensions: ['.vue', '.js']
  }
  1. 多进程打包 thread-loader 提升构建速度 @vue/cli create-react-app 都已经内置了
  2. splitChunks 分包
  3. DllPlugin DllReferencePlugin 分包 加快 构建速度

相关文章

网友评论

      本文标题:webpack 优化

      本文链接:https://www.haomeiwen.com/subject/euancltx.html