Vue——11- webpack保姆级教程02——source-map、oneOf、externals、树摇技术、安装jQuery、 对css进行打包压缩以及 code split（代码分割）

目录

一、source-map

source-map查错

​​二、oneOf

三、安装jQuery插件并对jQuery进行打包

四、externals

五、对css文件进行打包压缩

六、webpack性能优化-tree shaking(树摇)

1、使用 ES6 模块化     

2、开启 **production**环境

​七、code split（代码分割）

为什么要使用代码分割？

第一种方法：多入口拆分

 第二种方法：optimization

 第三种方法：import动态导入语法

---

一、source-map

source-map查错

配置sourve-map之前先要配置css兼容性写法

source-map：一种提供源代码到构建后代码的映射的技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）

借助上一章例子来演示：详情请参考webpack打包保姆级教程01

在webpack.config.js中添加devtool:'source-map' 

devtool: 'eval-source-map'

 添加了俩排错文件map 

二、oneOf

加快打包速度，把rules里面的所有内容用{oneOf：[]}

 

 再次运行

 npx webpack-dev-server

---

三、安装jQuery插件并对jQuery进行打包

npm install jquery --save-dev 

引入jQuery：

import $ from 'jquery';
console.log($);

 进行打包：

在node_moddules文件夹中发现已经有了jQuery即为成功 

 

 运行一下：

 npx webpack-dev-server

 但是如果引入过多的文件比如图表啊unitApp等一系列文件会导致main.js特别大，打开速度也会随之变慢。这时需要解决一下

四、externals

externals：让某些库不打包。

webpack.config.js 中配置：用的时候把注释给删掉

externals: {
  // 拒绝jQuery被打包进来(通过cdn引入，速度会快一些)
  // 忽略的库名 -- npm包名
  jquery: 'jQuery'
}

 然后需要在 index.html 中通过 cdn 来引入：

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

 引入jquery.js库可以用猫云进行获取路径

 

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

可以通过npx webpack-dev-server 来运行并查看大小

压缩前：main.js为555kib

 压缩后：main.js为 273kib

五、对css文件进行打包压缩

npm install css-minimizer-webpack-plugin --save-dev

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");//压缩css

 new CssMinimizerPlugin(),//新的压缩css方法

打包即可 

六、webpack性能优化-tree shaking(树摇)

tree shaking：去除应用程序中没有使用到的无用代码

前提：

1、使用 ES6 模块化     

比如可以使用import，export。 require不可以

2、开启 **production**环境

这样就会自动把无用代码去掉 

作用：减少代码体积

如果js代码中引入add，没有引入mul。但是都被打包进来，说明这里就是有问题的

 解决方法：通过树摇来去除无用代码

回到编辑器，在mathUtils.js中注释之前的代码

分别写入ES6语法

export function add(num1,num2){
  return num1 + num2
}
export function mul(num1,num2){
  return num1 * num2
}

 如果这里是development

process.env.NODE_ENV = 'developent'

 这里来打包一下是不是可以打包出来

 可以看到已经成功打包完成，但是这里只想引入add，并不想引入mul。需要通过树摇来引入

 把mode换成production

 打包一下，可以看到里面是存在mul

这里再注释mul 

 再次打包，会发现已经找不到mul了

而且会自动清除你的注释

在 package.json 中配置：

"sideEffects": false表示所有代码都没有副作用（都可以进行 tree shaking）

这样会导致的问题：可能会把 css / @babel/polyfill 文件排挤掉（副作用）

所以可以配置"sideEffects": ["*.css", "*.less"]：不会对css/less文件tree shaking处理

七、code split（代码分割）

为什么要使用代码分割？

在vue单页应用中，若不做任何处理，所有vue文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。

随着应用扩展，包（bunle）会越来越大。尤其是如果引入了庞大的第三方库。你必须留意你引入的包的大小。防止你打包之后，app加载需要太长时间。

为了防止弄出来一个大包，代码分割是一个比较好的解决办法。代码分割是Webpack和Browserify（通过factor-bundle）的一个特性。允许创建多个包，然后在运行时(runtime)加载。

代码分割可以帮助App实现『懒加载』当前用户需要的那一部分，而不必全部加载。这样动态加载能提高应用性能表现。

简单来说就是把一个js分割成多个小js然后同时运行，类似于异步操作

第一种方法：多入口拆分

把mathUitls.js名字也放入其webpack.config.js的入口文件中：

  entry: {
    index: './src/index.js',
    mathUtils: './src/mathUtils.js'
  },

  output: {
    // [name]：取文件名
    filename: 'js/[name].[contenthash:10].js',
    path: path.resolve(__dirname, 'dist')
  },

 打包完成后即可分离开来

 

 第二种方法：optimization

optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },

all：把所有的东西全部拆开 

！！！注意：

 

 

 因为在项目中通常只会引入一个入口文件。

这样就可以打包了

 

 

 output.filename 的输出文件名是 [name].min.js，[name] 根据 entry 的配置推断为 index，所以输出为 index.min.js；

 第三种方法：import动态导入语法

 如果是普通打包的话会将mathUtils.js文件打包到index.js文件里

所以我们可以使用动态导入语法去把它单独导出来 

import('./mathUtils').then(({add,mul})=>{
    console.log(add(300,200));
}).catch(()=>{
    console.log('文件加载失败');
})

再次进行打包 

 但是这里会发现只看名字并不能分清楚哪个对哪个

所以要以注释的方式添加一个webpackChunkName

/*webpackChunkName:'mathUtils'*/

   webpackChunkName:指定test单独打包后文件的名字

import(/*webpackChunkName:'mathUtils'*/'./mathUtils').then(({add,mul})=>{
    console.log(add(300,200));
}).catch(()=>{
    console.log('文件加载失败');
})

再次打包npm run build

可以看到名字已经更改完成