Removing script tag “window.__NUXT__=~” in Nuxt Generated file
Nuxt Generation can create static HTML files. We can publish web sites by uploading the generated files to Hosting services or S3 of AWS. It seems good the way suits hosting the LP sites.
Version
- nuxt@2.8.1
Nuxt generate end up creating unnecessary script tag
HtmlfFiles from Nuxt generating are included unnecessary script.
<!doctype html>
<html data-n-head-ssr lang="ja" data-n-head="lang">
<head data-n-head="">
<!--omit-->
</head>
<body data-n-head="">
<!--omit-->
<!--From here-->
<script>window.__NUXT__=(function(a){return {hoge: 'fuga'}],error:null,serverRendered:true,logs:[]}}(""));</script>
<script src="/_nuxt/runtime.js" defer></script><script src="/_nuxt/pages/index.js" defer></script><script src="/_nuxt/vendors.app.js" defer></script><script src="/_nuxt/vendors.app.hoge.js" defer></script><script src="/_nuxt/app.js" defer></script><script src="/_nuxt/app.huga.js" defer></script>
<!--To here-->
</body>
</html>
It write properties that are set in “asyncData" to “window.__NUXT__=". “asyncData" with Nuxt is called on server-side, can take website SSR.
async asyncData(context) {
// fetch data with WebApi on server side
const model = await axios.get('hoge')
return {
model: model // set for pre-render on server-side
}
}Rendering data, for example model class that are set in “asyncData", are written into script tag, then Javascript make HTML from the data in script tag. But the generate with Nuxt has created HTML files after JS rendering, so it seems that the script tag are unnecessary.
When Vue use a little data that are part of huge data fetched from API in “asyncData", it end up making a large size HTML file and reveal model structure which should be secured.
Remove the Script Tag after Generate
How to remove the script in Generating is adding the following at nuxt.config.js.
const cheerio = require('cheerio')
export default {
// omit
hooks: {
'generate:page': page => {
const doc = cheerio.load(page.html);
doc(`body script`).remove();
page.html = doc.html();
},
},
// omit
}I used library “cheerio" for scraping.
It removes garbage tags by hookking on generating the page file. It’s better that remove the only tag as “window.__NUXT__=".
It can be created more secure and more smart static file.