webpack1.x 打包文件过大优化
1. 图片单独打包
module: {
loaders: [
{
test: /\.(jpe?g|png|gif|svg)$/,
loader: 'url?limit=8192&name=./assets/img/[hash:8].[name].[ext]',
},
]
}
2. 单独打包成一个css
注:
# for webpack 3 npm install --save-dev extract-text-webpack-plugin
# for webpack 2 npm install --save-dev extract-text-webpack-plugin@2.1.2
# for webpack 1 npm install --save-dev extract-text-webpack-plugin@1.0.1
module.exports = {
plugins: [
new ExtractTextPlugin("styles.css"),
],
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader","css-loader")
},
{
test: /\.scss$/,
loader: "style!css!sass"
},
{
test: /\.less$/,
loader: "style!css!less"
},
]
}
}
3.提取公共类库
//首先在entry 声明第三方库
entry: {
app: ['index.js'],
//app: path.resolve(APP_PATH, 'index.js'),
//添加要打包在vendeors里面的库
vendors: ['jquery', 'moment']
},
plugins: {
//把入口文件里面的数组打包成vendors.js
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
}
4.js压缩
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: true
},
output: {
comments: false,
}
}),
]
webpack1.x 打包文件过大优化的更多相关文章
- 成功解决react+webpack打包文件过大的问题
最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...
- angular 4 开发环境下打包文件过大
angular 4本地开发环境下,ng server -- port 8080 -o 之后在在浏览器中查看数据请求,其中vendor.bundle.js有8.3mb,而整个传输数据大小为16.3mb ...
- Nginx开启gzip压缩解决react打包文件过大
用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式 在nginx配置中添加如下 ...
- webpack打包经验——处理打包文件体积过大的问题
前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 Ex ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
cnpm run build 文件过大,其中主要是vender.js有1.5M,代码部署到服务器,首次访问加载页面时比较慢,耗时6.5s左右,所以需要优化下. 1.Nginx开启gzip 找到ngin ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- 打包phar文件过大的问题。
根据一个开源工具得到的灵感,使用流打包,并使用token_get_all移除了所用PHP文件的空白.现在打包出来只有93k了.谢谢关注. 我一个简单的文件,加上一个symfony的process包,打 ...
- 解决使用vue打包时vendor文件过大或者是app.js文件很大的问题
这篇文章主要介绍了使用vue打包时vendor文件过大或者是app.js文件很大问题的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 第一次使用vue2.0开发,之前都是用的angu ...
- vue 打包后app.css,verondor.js文件过大
参考:https://blog.csdn.net/feiyu_may/article/details/80987404 https://blog.csdn.net/qq_4199961 ...
- gulp批量打包文件并提取公共文件
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器. browseriyf是模块化打包工具. 一般情况下,Browserify 会把所有的模块打包成单个文件.单个文件在大多数情况下是 ...
随机推荐
- 【已解决】SpringBoot + Mybatis-plus 实体类属性注解 @TableField 无法获取到数据库值(属性变量名带下划线)
问题描述: 实体类变量的命名格式 如果采用的是 XX_XX带下划线的形式,那么在低版本的mybatis-plus是不支持和数据库映射的. 如果是单个单词不存在这个问题,如果出现多个单词,尽量采用驼峰式 ...
- Vue + Element table中的某行触发enter事件后,使该行disabled
废话不罗嗦,上硬菜. 1.html下: <el-table-column label="名称" sortable> <template slot-scope=&q ...
- Modern C++ ——constexpr的各种用法
Modern C++ --constexpr的用法 Reference <现代C++语言核心特性解析> 为什么引入constexpr const可以定义常量,但也可以用来定义只读变量.co ...
- Bat命令进行压缩X文件夹下的文件夹及文件
输出日志 echo off for /d %%i in (D:\project101\trunk\x_client\xProject\Assets\AssetBundles\Android~\*.) ...
- vue使用websoket
参考链接:https://www.cnblogs.com/qisi007/p/10213886.html export default { name: "realdetail", ...
- Docker学习笔记-03 容器数据卷
1.宿主 vs容器直接映射数据容器卷 docker run -it --privileged=true -v /宿主机绝对路径目录 :/ 容器内目录 镜像名 eg: docker run ...
- python3 小知识
本博客分为三部分,一是字典和函数结合,代替if-else判断语句:二是数组的元素带有括号:三是完整代码.图片略多. 1. 字典和函数结合,代替if-else判断语句 写函数时经常会遇到一个函数的某 ...
- select multiple 浏览器兼容
select multiple 时一般是设置 height <select multiple="multiple" style="height:87px;" ...
- 吴恩达老师机器学习课程chapter08——降维
吴恩达老师机器学习课程chapter08--降维 本文是非计算机专业新手的自学笔记,高手勿喷. 本文仅作速查备忘之用,对应吴恩达(AndrewNg)老师的机器学期课程第十四章. 本章节只有结论,没有任 ...
- SVN安装配置手册
1.官网下载相关的服务端的安装包 SVN(版本控制器): SVN-客户端:TortoiseSVN SVN-服务端:VisualSVN 下载地址: TortoiseSVN:https://tortois ...