您好,登錄后才能下訂單哦!
這篇文章主要介紹“Webpack構(gòu)建代碼質(zhì)量壓縮的方法是什么”,在日常操作中,相信很多人在Webpack構(gòu)建代碼質(zhì)量壓縮的方法是什么問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Webpack構(gòu)建代碼質(zhì)量壓縮的方法是什么”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
一、react-router4實(shí)現(xiàn)按需加載
單頁(yè)應(yīng)用按需加載一般原則:
1.將網(wǎng)站劃分成一個(gè)個(gè)小功能,在按照每個(gè)功能的相關(guān)度將他們分成幾個(gè)類(lèi);
2.將沒(méi)一個(gè)類(lèi)合并成一個(gè)chunk,按需加載對(duì)應(yīng)的代碼;
3.不可將用戶(hù)***進(jìn)入網(wǎng)站時(shí)需要看到畫(huà)面的對(duì)應(yīng)功能Chunk按需加載;
被分割出去的代碼的加載需要一定的觸發(fā)時(shí)機(jī),即當(dāng)用戶(hù)操作了或者即將操作對(duì)應(yīng)功能時(shí)再去加載對(duì)應(yīng)的代碼(默認(rèn)使用react-router按需加載的觸發(fā)條件是路由的變化)
實(shí)現(xiàn)條件:
1.使用插件:npm i react-loadable;
2.配合bable插件npm i @babel/plugin-syntax-dynamic-import;
代碼示例:
// .bablerc { "plugins": ["@babel/plugin-syntax-dynamic-import"] } // 示例代碼 Loadable({ loader: () => import('./component'), //按需加載組件 loading: Loading, //處理組件加載的loading、error等 delay: 300 //延遲加載避免loading的閃爍問(wèn)題 }); // Loading組件自定義 // 接受三個(gè)props,其中pastDelay:等待時(shí)觸發(fā);timedOut:超時(shí)時(shí)觸發(fā)超過(guò)delay;error:出錯(cuò)觸發(fā)默認(rèn)為200ms const Loading = ({ pastDelay, timedOut, error }) => { if (pastDelay) { return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin> } else if (timedOut) { return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin> } else if (error) { return <div>Error!</div>; } return null; };
二、提取公共代碼webpack.optimization
optimization: { splitChunks: { chunks: "all", cacheGroups: { vendors: { test: /node_modules/, name: 'vendors', minSize: 0, minChunks: 1, chunks: 'initial', priority: 2 // 該配置項(xiàng)是設(shè)置處理的優(yōu)先級(jí),數(shù)值越大越優(yōu)先處理 }, commons: { name: "comomns", test: resolve("src/components"), // 可自定義拓展規(guī)則 minChunks: 2, // 最小共用次數(shù) minSize:0, //代碼最小多大,進(jìn)行抽離 priority: 1, //該配置項(xiàng)是設(shè)置處理的優(yōu)先級(jí),數(shù)值越大越優(yōu)先處理 } } }
三、壓縮文件js\css
使用npm i -D webpack-parallel-uglify-plugin啟用多線程并行壓縮JS
optimization: { minimizer: [ new ParallelUglifyPlugin({ cacheDir: '.cache/', //緩存壓縮,默認(rèn)不緩存,設(shè)置存放位置開(kāi)啟 test: /.js$/, //匹配需要壓縮的文件,默認(rèn)為/.js$/和Loader配置一樣 //include: [], 使用正則去選擇需要被壓縮的文件和Loader配置一樣 //exclude: [], 使用正則去去除不需要被壓縮的文件和Loader配置一樣 //workerCount: 2, 開(kāi)啟幾個(gè)子進(jìn)程并發(fā)執(zhí)行壓縮 // sourceMap: false, 是否輸出source Map,開(kāi)啟會(huì)導(dǎo)致壓縮變慢 // uglifyJS: {}, 用于壓縮ES6代碼不可和uglifyJS同時(shí)使用 uglifyJS:{//壓縮ES5代碼 output: { // 是否輸出可讀性較強(qiáng)的代碼,即會(huì)保留空格和制表符,默認(rèn)為輸出,為了達(dá)到更好的壓縮效果,可以設(shè)置為false beautify: false, //是否保留代碼中的注釋?zhuān)J(rèn)為保留,為了達(dá)到更好的壓縮效果,可以設(shè)置為false comments: false }, compress: { //是否在UglifyJS刪除沒(méi)有用到的代碼時(shí)輸出警告信息,默認(rèn)為輸出 warnings: false, //是否刪除代碼中所有的console語(yǔ)句,默認(rèn)為不刪除,開(kāi)啟后,會(huì)刪除所有的console語(yǔ)句 drop_console: true, //是否內(nèi)嵌雖然已經(jīng)定義了,但是只用到一次的變量,比如將 var x = 1; y = x, 轉(zhuǎn)換成 y = 1, 默認(rèn)為否 collapse_vars: true, // 提取出現(xiàn)多次但是沒(méi)有定義成變量去引用的靜態(tài)值 reduce_vars:true } }, }), ] },
提取和壓縮Css
1.使用插件:optimize-css-assets-webpack-plugin、mini-css-extract-plugin
2.使用示例:
// 提取css到單獨(dú)的文件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // optimizeCssPlugin CSS文件壓縮插件 const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); const extractSCSS = new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', chunkFilename: 'css/[name]_[contenthash:8].css', fallback:'style-loader' }); ... ... plugins: [ new optimizeCssPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano'), cssProcessorOptions: { discardComments: { removeAll: true } }, canPrint: true }), ]
webpack配置接入CDN
CDN
網(wǎng)站接入CDN,需要將網(wǎng)頁(yè)的靜態(tài)資源上傳到CDN服務(wù)器,使用CDN地址訪問(wèn);
使用CDN可以決解資源并行下載限制,處理靜態(tài)資源Cookie同域名攜帶等問(wèn)題;
CDN緩存和回源需要合理的設(shè)置靜態(tài)資源hash
接入CDN會(huì)引入多個(gè)域名,增加域名解析時(shí)間,可進(jìn)行預(yù)解析域名<link rel="dns-prefetch" href="//js.dns.com" />
webpack實(shí)現(xiàn)接入
output.publicPath設(shè)置JavaScript地址
css-loader.publicPath設(shè)置CSS導(dǎo)入的資源地址
WebPlugin.stylePublicPath中設(shè)置Css文件地址
// JavaScript output: { publicPath: '//js.cdn.com/js/', path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方 // 為輸出的JavaScript文件名加上Hash值使用`chunkhash`(chunkhash:根據(jù)模塊內(nèi)容變化;hash: 根據(jù)每次構(gòu)建隨機(jī)) filename: "js/[name].[chunkhash:8].js", chunkFilename: "js/[name]-[id].[chunkhash:8].js", },
開(kāi)啟gzip壓縮
使用插件:npm i -D compression-webpack-plugin;
webpack配置
const CompressionPlugin = require("compression-webpack-plugin"); plugins: [ new CompressionPlugin({ filename: '[path].gz[query]', //目標(biāo)資源名稱(chēng)。[file] 會(huì)被替換成原資源。[path] 會(huì)被替換成原資源路徑,[query] 替換成原查詢(xún)字符串 algorithm: 'gzip',//算法 test: /\.(js|css)$/, //壓縮 js 與 css threshold: 10240,//只處理比這個(gè)值大的資源。按字節(jié)計(jì)算 minRatio: 0.8//只有壓縮率比這個(gè)值小的資源才會(huì)被處理 }) ]
后臺(tái)開(kāi)啟使用koa
const staticCache = require('koa-static-cache'); import config from './configs'; const app = new Koa(); app.use(staticCache(path.resolve(__dirname, "../dist"), { maxAge: 7 * 24 * 60 * 60, gzip: true, //開(kāi)啟 dynamic: true, }))
接入treeShaking,剔除無(wú)用代碼
Tree Shaking可以用來(lái)找出有用代碼,去除JavaScript中用不上的死代碼;但是它依賴(lài)于ES6靜態(tài)花模塊語(yǔ)法import\export的導(dǎo)入和導(dǎo)出
webpack接入
修改.babelrc保留ES6模塊話(huà)語(yǔ)句
注意新版本babel-preset-env已經(jīng)預(yù)設(shè)babel-preset-es2015,babel推薦使用babel-preset-env取代babel-preset-es2015,并且繼續(xù)使用babel-preset-es2015會(huì)發(fā)出警告信息。
{ "presets": [ ["env", { "modules": false }] ], "plugins": ["syntax-dynamic-import"] }
webpack --display-used-exports運(yùn)行構(gòu)建帶上--display-used-exports可追蹤到Tree Shaking的工作;
Webpack只能正確的分析出如何剔除死代碼,需要接入U(xiǎn)glifyJs處理剔除(配置見(jiàn)上)
開(kāi)啟Scope Hoistion
scope hoisting即作用域提升;
在構(gòu)建過(guò)程中,webpack會(huì)借助ES6 模塊化的靜態(tài)特性,確定模塊的依賴(lài)關(guān)系,將一個(gè)bundle中的靜態(tài)依賴(lài)提升到頂部。(所以需要和接入treeShaking一樣配置Babel開(kāi)啟ES6模塊化)
原理:分析模塊間的依賴(lài)關(guān)系,盡可能的將零散的模塊合并到一個(gè)函數(shù)中去,前提不能造成代碼冗余,因此只有被引用了一次的模塊才能被合并。
接入好處:
1.代碼體積減少
2.代碼在運(yùn)行時(shí)因?yàn)閯?chuàng)建的函數(shù)作用域更少了,內(nèi)存開(kāi)銷(xiāo)也隨之變小
webpack接入ModuleConcatenationPlugin內(nèi)置插件
const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin'); plugins: [ new ModuleConcatPlugin(), //開(kāi)啟scope Hoisting ],
到此,關(guān)于“Webpack構(gòu)建代碼質(zhì)量壓縮的方法是什么”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。