本篇文章给大家谈谈webpack性能优化，以及webpack4优化对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、webpack打包的CSS含有两个相同的引入?
- 2、详解Webpack如何引入CDN链接来优化编译后的体积
- 3、webpack-打包优化方案
- 4、打包优化去掉console.log,webpack.js配置排除打包瘦身
webpack打包的CSS含有两个相同的引入?
下载html-webpack-plugin插件；引入html-webpack-plugin插件；使用html-webpack-plugin插件，并进行相应配置。2 打包样式资源 不同的样式文件需要配置不同的loader 下载loader；配置loader，css样式文件使用css-loader和style-loader，less文件使用less-loader、css-loader和style-loader。
在本地运行样式没问题，打包后到测试环境，就出现问题，可以看到加载的css顺序变化了。统一修改某个class，本地为A覆盖了B，打包后可能为B覆盖了A。查找了很多文章都说是加载css顺序不一样导致的，的确如此。往往是在某个组件中，没有用scoped，导致污染了全局的样式。
一般来说需要引入css-loader和style-loader，其中css-loader用于解析，而style-loader则将解析后的样式嵌入js代码。
资源引入规则相对路径，比如 ./assets/logo.png会被解析成模块依赖。它们会被一个基于你Webpack输出配置的自动生成URL替代。没有前缀的路径，比如assets/logo.png，同相对路径，转义成./assets/logo.png有~前缀的路径。 ~被认为是一个模块请求，同require(some-module/image.png)。
详解Webpack如何引入CDN链接来优化编译后的体积
1、其实使用cdn就是在webpack热启动打包的时候动态插入脚本和样式链接。为了维护方便，我们在build/utils.js文件中增加了几个方法，以后可以在webpack.dev.conf.js和webpack.prod.conf.js上使用。如果没有build/utils.js，可以添加到其他文件中，只要后续步骤可以操作即可。
2、使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。
3、webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可。{ plugins： [new webpack.optimize.UglifyJsPlugin({ compress： { warnings： false } })]} 加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。另外，服务器端还可以开启 gzip 压缩，优化的效果更明显。
webpack-打包优化方案
babel-plugin-dynamic-import-node 插件是使 import() 替换成 require 编译 修改 .babelrc 文件 注意 ：使用插件 build 后没有 chunk files 文件。通过 DllPlugin 插件分离出第三方包 使用 add-asset-html-webpack-plugin 动态添加 dll.js 到 html 。
默认情况下 Webpack 会从入口文件 ./node_modules/react/react.js 开始递归的解析和处理依赖的几十个文件，这会时一个耗时的操作。 通过配置 resolve.alias 可以让 Webpack 在处理 React 库时，直接使用单独完整的 react.min.js 文件，从而跳过耗时的递归解析操作。
然而，有几个解决方案，最有效的，是使用weboack的watch，只有文件md5变化时，才会重新打包，并且只parse有变化的文件，其他没变化的文件是使用缓存的。这样子，打包时间迅速降到200ms以内。 再优化下去的话，我们要知道webpack打包的过程中做了啥，首先是解析依赖啦，然后就是各种各样的loader。
去除不必要的插件 刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin， NoErrorsPlugin... 这时候不管用什么优化方式，都没多大效果。
通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。例如：让 webpack 不打包 vue xlsx 和 element先找到 vue.config.js ， 添加 externals 项，具体如下：再次运行打包，我们会发现包的大小已经大幅减小： 三个包已经不在打包的目标文件中了。
webpack有两种组织模块的依赖方式，同步、异步。异步依赖将作为分割点，形成一个新的块；在优化了依赖树之后，每一个异步区块都将作为一个文件被打包。webpack有一个智能解析器，几乎可以处理任何第三方库。
打包优化去掉console.log,webpack.js配置排除打包瘦身
babel-plugin-dynamic-import-node 插件是使 import() 替换成 require 编译 修改 .babelrc 文件 注意 ：使用插件 build 后没有 chunk files 文件。通过 DllPlugin 插件分离出第三方包 使用 add-asset-html-webpack-plugin 动态添加 dll.js 到 html 。
优化resolve.extensions 配置 在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在。
去除不必要的插件 刚开始用 webpack 的时候，开发环境和生产环境用的是同一个 webpack 配置文件，导致生产环境打包的 JS 文件包含了一大堆没必要的插件，比如 HotModuleReplacementPlugin， NoErrorsPlugin... 这时候不管用什么优化方式，都没多大效果。
关于webpack性能优化和webpack4优化的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
