vue 文件 打包 压缩 从 6m 到 上百 kb

原创 李仁伟前端笔记 随笔 vue 216阅读 2018-07-31 19:14:00 举报

https://www.jianshu.com/p/ce95b259b45e
/* 以下 两个 是 webpack.prod.config.js***/
new UglifyJsPlugin({
uglifyOptions: {
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 console 语句
// 还可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true
}
},

plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': prodEnv
}),
new UglifyJsPlugin({
uglifyOptions: {
// 最紧凑的输出
beautify: false,
// 删除所有的注释
comments: false,
compress: {
// 在UglifyJs删除没有用到的代码时不输出警告
warnings: false,
// 删除所有的 console 语句
// 还可以兼容ie浏览器
drop_console: true,
// 内嵌定义了但是只用到一次的变量
collapse_vars: true,
// 提取出出现多次但是没有定义成变量去引用的静态值
reduce_vars: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),

if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')

webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
// test: /.js$|.css$|.html$/,
threshold: 10240,
minRatio: 0
})
)
}

vue-ydui

productionSourceMap: false,
productionGzip: true, /*config index.js**/

/**** config index.js

productionSourceMap: false,

productionGzip: true,

*****/

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',

/**
 * Source Maps
 */

productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],

// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report

}

https://www.webpackjs.com/concepts/ webpack打包 文档
/**** pack json "compression-webpack-plugin": "^1.1.11", *****/

https://segmentfault.com/a/1190000011138081
/上面 这个 文件 展示了 查看项目 包片 效果 /

/**** 以下是 cdn 加速 优化 *****/

cdn——维基百科给出的解释是:内容分发网络(Content delivery network或Content distribution network,缩写:CDN)。简单来说它主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上,让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容,减少网络传输距离从而达到加速的目的(需要提过资源绝对地址告诉cdn厂商,让厂商去智能拉取)。

原理 : 内容分发网络,需要被分发的内容分发到世界各地的各节点上,让所有人在距离最近的网络节点拿到想要拿到的内容减少 网络传输距离达到加速目的。
(目前最火的cdn厂商有:乐视云、金山云和网宿等。)
(2)Externals
你可以告诉webpack无需打包哪些库文件,然后从外部用 CDN 引入。
外部扩展(Externals)

以Jquery为栗子

index.html

...
<script src="https://code.jquery.com/jquery-3.1.0.js"; integrity="sha256-
slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
...
webpack.config.pro.js

externals: {
jquery: 'jQuery'
}

mode: 'history', //清掉 地址栏里面的#

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复