Angular-cli 1.6.7 构建应用
webpack的一些配置
使用
ng new my-app
初始化的项目并不包含webpack配置文件,需要ng eject
命令来加入webpack.config.js
配置文件。
此时这个文件里已经有了较为完善的配置。但是还缺少一些其它的需求。
1. uglifyjs-webpack-plugin
js压缩插件
将js文件压缩,减小打包后文件的体积。
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);
...
new UglifyJsPlugin({
"test": /\.js$/i,
"extractComments": false,
"sourceMap": true,
"cache": false,
"parallel": false,
"uglifyOptions": {
"output": {
"ascii_only": true,
"comments": false
},
"ecma": 5,
"warnings": false,
"ie8": false,
"mangle": {
properties: {
regex: /^my_[^_]{1}/,
reserved: ["$", "_"]
}
},
"compress": {}
}
})
2. compression-webpack-plugin
生成gzip文件插件
进一步减小打包文件体积。
const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘);
...
new CompressionWebpackPlugin()
这个需要服务器开启gzip on;
,以nginx为例,需要为服务器进行以下配置:
conf/nginx.conf:
http {
include mime.types;
default_type application/octet-stream;
#log_format main ‘$remote_addr - $remote_user [$time_local] "$request" ‘
# ‘$status $body_bytes_sent "$http_referer" ‘
# ‘"$http_user_agent" "$http_x_forwarded_for"‘;
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
# 开启gzip
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
server {
listen 8088;
server_name localhost;
location / {
root website/angular;
index index.html;
}
}
}
经过以上两步压缩后我的测试部署文件从3.xMB到了224KB。
3. clean-webpack-plugin
清除打包文件工具
每次npm run build
后都会生成新的打包文件(文件名添加hash),这个插件可以在打包后删除之前旧的文件。
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
...
new CleanWebpackPlugin([‘dist‘], {
root: projectRoot,
verbose: true,
dry: false
})
可能还需要单独打包css文件,但是目前没有找到好的解决方案(extract-text-webpack-plugin
)。
我的环境
Angular CLI: 1.6.7 (e)
Node: 9.2.0
OS: win32 x64
Angular: 5.2.3
The end... Last updated by: Jehorn, Mar 14, 2018, 03:40 PM
原文地址:https://www.cnblogs.com/jehorn/p/8568109.html
时间: 2024-11-11 07:13:06